// filosofie.jsx — manifest: stručně, 3 principy
function Filosofie() {
  const principles = [
    {
      kicker: '01',
      title: 'Marketing není náklad. Je to investice.',
      body: 'Dobrý marketing přináší byznys, neutrácí.'
    },
    {
      kicker: '02',
      title: 'Marketing je řemeslo, ne pomocná disciplína.',
      body: 'Vyžaduje vzdělání, praxi a soustavné učení.'
    },
    {
      kicker: '03',
      title: 'Každý projekt má cíl, ne jen kreativu.',
      body: 'Když odpověď na „k čemu to je" nemáme, nedělejme to.'
    },
    {
      kicker: '04',
      title: 'Dobrý marketing si zaslouží každá firma.',
      body: 'Profesionální značku může mít i firma s 30 lidmi — jen s jiným rozpočtem.'
    },
    {
      kicker: '05',
      title: 'Značka je organismus. Vyvíjí se.',
      body: 'Reaguje na trh — statická značka časem zastará.'
    }
  ];

  return (
    <section className="filosofie" data-screen-label="Filosofie">
      <img
        className="filosofie__stone"
        src="./assets/stone-mark.png"
        alt=""
        aria-hidden="true"
        data-reveal
      />
      <div className="shell" style={{ padding: 0, position: 'relative' }}>
        <div className="filosofie__head">
          <div className="filosofie__head-text">
            <span className="eyebrow" data-reveal>↳ MANIFEST</span>
            <h2 className="h-1 filosofie__title" data-reveal style={{ marginTop: 16 }}>
              jak vidíme<br />svět <em>marketingu</em>.
            </h2>
          </div>
        </div>

        <ol className="filosofie__list">
          {principles.map((p, i) => (
            <li
              key={i}
              className="filosofie__item"
              data-reveal
              style={{ "--reveal-delay": i * 90 + 'ms' }}
            >
              <span className="filosofie__num mono">{p.kicker}</span>
              <div className="filosofie__body">
                <h3 className="filosofie__principle">{p.title}</h3>
                <p className="filosofie__copy">{p.body}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

window.Filosofie = Filosofie;