// About

const About = ({ navigate }) => {
  const C = window.COMPANY;
  return (
    <main>
      <PageHero
        index="// ABOUT"
        eyebrow="WHO WE ARE"
        title="A small studio with a sharp focus."
        lede={C.pitch}
      />

      {/* Principles */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-index">/ 01</div>
            <div>
              <div className="eyebrow"><span className="dot"/>Principles</div>
              <h2 style={{marginTop: 14, maxWidth:'20ch'}}>The rules we plan to keep.</h2>
            </div>
          </div>
          <div className="principles">
            {window.PRINCIPLES.map(p => (
              <div key={p.n} className="principle">
                <span className="mono principle-n">{p.n}</span>
                <div>
                  <h3 className="principle-t">{p.t}</h3>
                  <p className="principle-d">{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Quick facts */}
      <section className="section" style={{borderTop:'1px solid var(--border)'}}>
        <div className="container">
          <div className="section-head">
            <div className="section-index">/ 02</div>
            <div>
              <div className="eyebrow"><span className="dot"/>Quick facts</div>
              <h2 style={{marginTop: 14}}>The basics.</h2>
            </div>
          </div>
          <div className="facts">
            {[
              ['Headquarters', C.hq],
              ['Stage', 'Early — building'],
              ['Get in touch', C.emails.hello],
              ['Support', C.emails.support],
            ].map(([k,v]) => (
              <div key={k} className="fact">
                <span className="mono fact-k">{k}</span>
                <span className="fact-v">{v}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
};

window.About = About;