const TENETS = [
  {
    n: '01',
    t: 'We build carefully.',
    d: 'Software earns trust slowly and loses it quickly. Every release is shaped by patient iteration, not pressure to perform.',
  },
  {
    n: '02',
    t: 'Software should solve tangible problems.',
    d: "We start from a real situation and a real person, not a market thesis. If a product can't justify itself in one sentence, we don't ship it.",
  },
  {
    n: '03',
    t: 'Small teams can build meaningful systems.',
    d: 'Focus is leverage. We stay small on purpose so the work is unhurried, the standards are high, and decisions stay with the people building.',
  },
];

const Philosophy = () => {
  return (
    <section id="about" className="k-section k-section--philosophy" data-screen-label="Philosophy">
      <div className="k-container">
        <div className="k-section__head">
          <span className="k-mono k-section__num">// 02 — philosophy</span>
          <h2 className="k-section__title">
            We optimize for one thing:<br />
            <span className="k-muted">applications worth using.</span>
          </h2>
        </div>

        <ol className="k-tenets">
          {TENETS.map((t) => (
            <li key={t.n} className="k-tenet">
              <span className="k-mono k-tenet__num">{t.n}</span>
              <h3 className="k-tenet__t">{t.t}</h3>
              <p className="k-tenet__d">{t.d}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
};

window.Philosophy = Philosophy;