// Services page — pillars, HOAI phases, FAQ

function ServicesPage({ navigate }) {
  const { FAQ } = window.feinData;
  const [open, setOpen] = React.useState(0);

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

      <section className="page-hero">
        <div className="crumb"><a onClick={() => navigate('home')}>Start</a> / Leistungen</div>
        <h1>
          <span style={{ fontWeight: 200 }}>Vom</span> <span className="b">Erstgespräch</span><br />
          <span style={{ fontWeight: 200 }}>bis zur</span> <span className="ital">Schlüssel­übergabe.</span>
        </h1>
        <div className="page-hero__row">
          <p className="lead">
            Ich biete alle neun <a href="https://www.gesetze-im-internet.de/hoai_2013/" target="_blank" rel="noopener noreferrer">HOAI-Leistungsphasen</a> aus einer Hand — und übernehme ebenso gerne Teilleistungen, etwa nur die Genehmigungsplanung oder die Bauleitung.
          </p>
          <p className="meta-mono">HOAI 2021 · Honorarzonen II–IV · auf Wunsch Baukosten­nachweis</p>
        </div>
      </section>

      <section className="svc__pillars">
        <div className="svc__pillar">
          <div className="num">01</div>
          <h3>Architektur</h3>
          <p>Neubau und Bestand, Wohnen und Gewerbe, vom Einfamilienhaus bis zum öffentlichen Bauvorhaben.</p>
          <ul>
            <li>Einfamilienhäuser, Doppel-/Reihenhäuser</li>
            <li>Mehrfamilienhäuser, Wohnanlagen</li>
            <li>Gewerbe- und Bürobauten</li>
            <li>Bildung und Kultur (öffentlich)</li>
          </ul>
        </div>
        <div className="svc__pillar">
          <div className="num">02</div>
          <h3>Bauen im Bestand</h3>
          <p>Sanierung, Umbau, Aufstockung, Umnutzung. Auch im Denkmalkontext und bei strenger Baurechts­lage.</p>
          <ul>
            <li>Energetische Sanierung</li>
            <li>Aufstockung und Anbau</li>
            <li>Umnutzung Gewerbe → Wohnen</li>
            <li>Denkmalpflege in Abstimmung mit der LDA</li>
          </ul>
          <p>Für energetische Sanierungen stehen <a href="https://www.kfw.de" target="_blank" rel="noopener noreferrer">KfW-Förderprogramme</a> zur Verfügung. Einen kompakten Überblick über staatliche Förderwege bietet das <a href="https://www.energiewechsel.de" target="_blank" rel="noopener noreferrer">Energiewechsel-Portal des Bundesministeriums</a>.</p>
        </div>
        <div className="svc__pillar">
          <div className="num">03</div>
          <h3>Innenarchitektur</h3>
          <p>Räume von innen gedacht. Materialwahl, Möblierung, Beleuchtung, Detailplanung — eigenständig oder als Teil eines Bauprojekts.</p>
          <ul>
            <li>Wohnungs­ausbau</li>
            <li>Praxen, Kanzleien, Büros</li>
            <li>Gastronomie und Hotellerie</li>
            <li>Sondermöbel-Entwurf</li>
          </ul>
        </div>
      </section>

      <section className="svc__phases">
        <div className="wrap">
          <div className="eyebrow light" style={{ marginBottom: 16 }}>— HOAI Leistungsphasen</div>
          <h2 className="h2" style={{ color: '#fff' }}>Neun Phasen, ein <span style={{ fontStyle: 'italic', fontWeight: 200 }}>klarer Weg</span>.</h2>
          <p className="lead" style={{ marginTop: 24 }}>Die HOAI gliedert ein Bauprojekt in neun Leistungsphasen. Ich begleite Sie durch alle — oder durch die, die Sie brauchen.</p>
          <div className="grid">
            {[
              ['LP 1', 'Grundlagen­ermittlung', 'Aufgabenstellung klären, Zielvorstellungen festhalten, Beratung zum Leistungsbedarf.'],
              ['LP 2', 'Vorplanung', 'Erste Lösungs­ansätze, Variantenstudien, erste Kostenschätzung nach DIN 276.'],
              ['LP 3', 'Entwurfs­planung', 'Ausgereifter Entwurf, durchgearbeitete Lösung, Kostenberechnung.'],
              ['LP 4', 'Genehmigungs­planung', <>Bauantrag mit allen erforderlichen Unterlagen, Verhandlung mit Behörden — in Stuttgart in Abstimmung mit dem <a href="https://www.stuttgart.de/buerger-und-staat/bauen-und-wohnen/" target="_blank" rel="noopener noreferrer">Baurechtsamt</a>.</>],
              ['LP 5', 'Ausführungs­planung', 'Werk- und Detailplanung im Maßstab 1:50 bis 1:1.'],
              ['LP 6', 'Vorbereitung der Vergabe', 'Leistungs­verzeichnisse, Mengen­ermittlung, Angebotsunterlagen.'],
              ['LP 7', 'Mitwirkung bei der Vergabe', 'Angebotsprüfung, Preisspiegel, Vergabeempfehlung.'],
              ['LP 8', 'Objekt­überwachung', 'Bauleitung vor Ort, Termin- und Kostenkontrolle, Abnahme.'],
              ['LP 9', 'Objekt­betreuung', 'Mängelfest­stellung, Gewährleistungs­begleitung über die Verjährungsfrist.']
            ].map(([lp, t, d]) => (
              <div key={lp} className="ph">
                <div className="lp">{lp}</div>
                <h4>{t}</h4>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="svc__faq">
        <div className="wrap">
          <div className="eyebrow petrol" style={{ marginBottom: 16 }}>— Häufige Fragen</div>
          <h2 className="h2">Was Bauherrinnen und Bauherren <span style={{ fontStyle: 'italic', fontWeight: 200 }}>oft</span> fragen.</h2>
          <div className="faq" style={{ marginTop: 48 }}>
            {FAQ.map(([q, a], i) => (
              <div key={i} className={`faq__item ${open === i ? 'open' : ''}`}>
                <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{q}</span>
                  <span className="pl">+</span>
                </button>
                <div className="faq__a"><div className="inner">{a}</div></div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

window.ServicesPage = ServicesPage;