// Studio / About page

function StudioPage({ navigate }) {
  const { CV, PARTNERS } = window.feinData;

  return (
    <>
      <Header route="studio" navigate={navigate} />

      <section className="page-hero">
        <div className="crumb"><a onClick={() => navigate('home')}>Start</a> / Büro</div>
        <h1>
          <span style={{ fontWeight: 200 }}>Ein</span> <span className="b">Büro</span>,<br />
          <span className="ital">geführt</span> <span style={{ fontWeight: 200 }}>von einer Person —</span><br />
          <span style={{ fontWeight: 200 }}>getragen von einem</span> <span className="b">Netzwerk</span>.
        </h1>
        <div className="page-hero__row">
          <p className="lead">
            feinplaner ist das Architekturbüro von Timo Pietschmann, freier Architekt in Stuttgart. Adresse, Werdegang und Netzwerk — alles, was Sie wissen müssen, bevor wir uns treffen.
          </p>
          <p className="meta-mono">Mitglied Architektenkammer Baden-Württemberg · Mörikestraße 12A · 70178 Stuttgart</p>
        </div>
      </section>

      <section className="studio__intro">
        <div>
          <img className="portrait" src={window.__resources.timoPortrait} loading="lazy" width="800" height="1067" alt="Architekt Stuttgart – Timo Pietschmann, Freier Architekt – feinplaner" />
          <div className="cap">Timo Pietschmann · Freier Architekt · Stuttgart</div>
        </div>
        <div className="copy">
          <h2>
            <span className="ital">Architektur</span> ist für mich vor allem eines:<br />
            sehr <span style={{ fontWeight: 700 }}>genau</span> hinhören.
          </h2>
          <p>Was wollen Bauherrinnen und Bauherren wirklich? Was kann das Grundstück, was nicht? Was sagen die Materialien, wenn man sie in Ruhe lässt? Aus diesen Fragen entstehen Häuser, die sich nicht laut über andere stellen — und gerade deshalb lange tragen.</p>
          <p>feinplaner ist mein Versuch, ganzheitliche Architektur aus einer Hand anzubieten — vom städtebaulichen Maßstab bis zum Möbeldetail — ohne Schnittstellenverluste, ohne weitergereichte Verantwortung.</p>
          <p>Was ich nicht alleine kann, mache ich mit einem festen Netzwerk aus Tragwerksplanung, Energieberatung, Schreinerei und weiteren Fachgebieten — Menschen, mit denen ich seit Jahren zusammenarbeite. Als eingetragener freier Architekt bin ich Mitglied der <a href="https://www.bak.de" target="_blank" rel="noopener noreferrer">Bundesarchitektenkammer</a> und unterliege den berufsrechtlichen Bindungen des Berufsstands.</p>
          <div className="sig">— Timo Pietschmann</div>
        </div>
      </section>

      <section className="studio__cv">
        <h3>— Lebenslauf · Eckdaten</h3>
        <ol>
          {CV.map(([yr, what, sub], i) => (
            <li key={i}>
              <div className="yr">{yr}</div>
              <div className="what">{what}{sub && <em>{sub}</em>}</div>
            </li>
          ))}
        </ol>
      </section>

      <section className="network">
        <h3>— Netzwerk</h3>
        <h2 className="network__head">
          Wir arbeiten mit denen, die ihr <span className="ital">Handwerk</span> {' '}wirklich beherrschen.
        </h2>
        <div className="network__list">
          {PARTNERS.map((pa, i) => (
            <div key={i} className="network__item">
              <div className="role">— {pa.role}</div>
              <h4>{pa.name}</h4>
              <p>{pa.city} · {pa.note}</p>
            </div>
          ))}
        </div>
      </section>

      <CtaStrip navigate={navigate} />
      <Footer navigate={navigate} />
    </>
  );
}

window.StudioPage = StudioPage;