/* Leistungen page */
const { useState: uS, useEffect: uE } = React;

const FULL_SERVICES = [
  {
    n: "01",
    title: "Innenanstriche & Wohnräume",
    img: "livingRoom",
    blurb: "Vom einzelnen Akzent bis zur kompletten Wohnungsrenovierung — mit sorgfältiger Vorbereitung der Untergründe und sauberen Übergängen, die auch im Streiflicht stimmen.",
    works: ["Wand- und Deckenanstriche", "Strukturputz und Spachteltechniken", "Tapezierarbeiten (Raufaser, Vlies, Designtapeten)", "Farbberatung mit Mustern vor Ort", "Renovierungs- und Schimmelbehandlung", "Schutzanstriche für Mietwohnungen"],
    materials: "Wir arbeiten bevorzugt mit lösungsmittelarmen, atmungsaktiven Wand­farben — auf Wunsch auch mit Naturfarben auf Mineral- oder Kasein-Basis."
  },
  {
    n: "02",
    title: "Fassaden & Außenanstriche",
    img: "facade1",
    blurb: "Die Fassade ist das Gesicht eines Hauses — und das, was am stärksten verwittert. Wir prüfen Untergrund, sanieren Risse und wählen ein Beschichtungssystem, das zur Bausubstanz passt.",
    works: ["Silikat- und Silikonharzbeschichtungen", "Risssanierung und Putzausbesserung", "Sockelschutz und Kellerabdichtung", "Holzverschalungen und Balkone", "Gerüstplanung und Anmeldung", "Reinigung mit Niederdruck oder Schwammstrahlen"],
    materials: "Bei Altbauten und denkmalgeschützten Objekten verwenden wir mineralische Silikatfarben, die diffusionsoffen sind und natürlich altern."
  },
  {
    n: "03",
    title: "Lackierungen — Holz & Metall",
    img: "woodDetail",
    blurb: "Türen, Fenster, Treppen, Heizkörper, Möbel: feine Lackarbeiten erfordern Geduld und einen staubfreien Raum. Größere Werkstücke nehmen wir mit in unsere Werkstatt.",
    works: ["Holzfenster (Erstlackierung & Renovierung)", "Innen- und Außentüren", "Treppen, Geländer, Handläufe", "Heizkörperlackierung", "Möbelaufarbeitung in der Werkstatt", "Spritzlackierung im Lackierraum"],
    materials: "Hauptsächlich seidenmatte Acryllacke und Alkydharz — auf Wunsch traditionelle Leinölfarben für historische Substanz."
  },
];

const PROCESS = [
  { n: "01", t: "Beratung vor Ort", d: "Wir kommen kostenfrei zu Ihnen, schauen uns die Räume oder das Objekt an und hören zu, was Sie sich vorstellen." },
  { n: "02", t: "Verbindliches Angebot", d: "Innerhalb einer Woche erhalten Sie ein detailliertes, schriftliches Angebot — ohne versteckte Posten." },
  { n: "03", t: "Termin & Vorbereitung", d: "Wir vereinbaren einen festen Starttermin, schützen Möbel und Böden und decken sauber ab." },
  { n: "04", t: "Ausführung", d: "Sie haben einen festen Ansprechpartner. Tägliche Aufräumarbeit ist für uns selbstverständlich." },
  { n: "05", t: "Abnahme", d: "Gemeinsame Endabnahme. Wir nehmen alles wieder mit — Sie haben nur das fertige Ergebnis." },
];

function ServicePage() {
  useReveal();
  return (
    <>
      <Nav active="leistungen" />
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ padding: "clamp(48px, 7vw, 96px) var(--pad)" }}>
          <div className="h-eyebrow" style={{ marginBottom: 24 }}>— Leistungen</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 96px)", maxWidth: 900 }}>
            Drei Disziplinen,<br/>
            <em style={{ color: "var(--accent)" }}>von Generation zu Generation</em> verfeinert.
          </h1>
        </div>
      </section>

      {FULL_SERVICES.map((s, i) => (
        <section key={s.n} className="section" style={{ background: i % 2 === 1 ? "var(--bg-2)" : "var(--bg)" }}>
          <div className="container">
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
              <ImgWithLabel src={window.IMAGES[s.img]} label={s.title} ratio="4/5" className="reveal" />
              <div className="reveal" style={{ display: "grid", gap: 24, paddingTop: 16 }}>
                <div className="h-eyebrow">— {s.n}</div>
                <h2 className="h-section">{s.title}</h2>
                <p className="lede">{s.blurb}</p>
                <div style={{ borderTop: "1px solid var(--line)", paddingTop: 24, marginTop: 8 }}>
                  <div className="h-eyebrow" style={{ marginBottom: 16 }}>Was dazu gehört</div>
                  <ul style={{ listStyle: "none", display: "grid", gap: 10, fontSize: 15 }}>
                    {s.works.map(w => (
                      <li key={w} style={{ display: "grid", gridTemplateColumns: "20px 1fr", gap: 12 }}>
                        <span style={{ color: "var(--accent)" }}>·</span>
                        <span>{w}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div style={{ borderLeft: "2px solid var(--accent)", padding: "8px 16px", marginTop: 16 }}>
                  <div className="h-eyebrow" style={{ marginBottom: 6 }}>Materialien</div>
                  <p style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 18, lineHeight: 1.4 }}>{s.materials}</p>
                </div>
              </div>
            </div>
          </div>
        </section>
      ))}

      {/* Process */}
      <section className="section" style={{ background: "var(--fg)", color: "var(--bg)" }}>
        <div className="container">
          <SectionHead num="— Ablauf" eyebrow="So arbeiten wir" title="Vom ersten Anruf <em>bis zur Abnahme.</em>" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 1, background: "rgba(245,241,234,0.15)", border: "1px solid rgba(245,241,234,0.15)" }}>
            {PROCESS.map(p => (
              <div key={p.n} className="reveal" style={{ background: "var(--fg)", padding: "32px 24px", display: "grid", gap: 12 }}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".15em", color: "rgba(245,241,234,0.5)" }}>{p.n}</div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 24, fontStyle: "italic" }}>{p.t}</div>
                <div style={{ fontSize: 13, color: "rgba(245,241,234,0.75)", lineHeight: 1.55 }}>{p.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand />
      <Footer />
    </>
  );
}

function CTABand() {
  return (
    <section className="section" style={{ background: "var(--bg-2)", padding: "80px 0" }}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 48, alignItems: "center" }}>
        <h2 className="h-section">Klingt nach Ihrem Projekt? <em>Schreiben Sie uns.</em></h2>
        <a href="kontakt.html" className="btn btn-primary">Anfrage stellen <span className="arrow">→</span></a>
      </div>
    </section>
  );
}

window.CTABand = CTABand;
ReactDOM.createRoot(document.getElementById("root")).render(<ServicePage />);