/* Über uns / Team */
const TEAM = [
  { name: "Stefan Radlinger", role: "Geschäftsführer · Malermeister", img: "craftsman", years: "seit 2008" },
  { name: "Maria Radlinger", role: "Büro & Farbberatung", img: "team", years: "seit 2010" },
  { name: "Tobias Hartl", role: "Vorarbeiter", img: "workshop", years: "seit 2014" },
  { name: "Lukas Wagner", role: "Geselle · Lackierer", img: "ladder", years: "seit 2019" },
];

const TIMELINE = [
  { year: "1978", t: "Josef Radlinger gründet den Betrieb in einer kleinen Werkstatt an der Hauptstraße." },
  { year: "1995", t: "Sohn Walter Radlinger übernimmt nach abgeschlossener Meisterprüfung." },
  { year: "2002", t: "Umzug in die heutige Werkstatt mit eigenem Lackierraum." },
  { year: "2008", t: "Stefan Radlinger führt den Betrieb in dritter Generation weiter." },
  { year: "2018", t: "Vierzigjähriges Jubiläum — und die ersten Mitarbeiter aus der eigenen Lehrwerkstatt." },
  { year: "2024", t: "Neuer Werkstattanbau mit Lager für Naturfarben und Mineralpigmente." },
];

function AboutPage() {
  useReveal();
  return (
    <>
      <Nav active="ueber" />
      <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 }}>— Über uns</div>
          <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 96px)", maxWidth: 1000 }}>
            Ein Betrieb,<br/>
            <em style={{ color: "var(--accent)" }}>drei Generationen,</em><br/>
            48 Jahre Vilshofen.
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }}>
            <ImgWithLabel src={window.IMAGES.workshop} label="Werkstatt Radlinger" ratio="4/5" className="reveal" />
            <div className="reveal" style={{ display: "grid", gap: 24 }}>
              <h2 className="h-section">Was uns wichtig ist.</h2>
              <p className="lede">
                Wir sind ein kleiner Familienbetrieb. Das heißt: kein Callcenter, keine wechselnden Subunternehmen, kein Verkaufsdruck. Wer bei uns anruft, spricht mit jemandem, der den Pinsel selbst noch in der Hand hält.
              </p>
              <p className="lede">
                Gute Maler­arbeit hängt zu zwei Dritteln an der Vorbereitung. Wir nehmen uns Zeit für das, was später keiner sieht — saubere Untergründe, geschütztes Mobiliar, ein aufgeräumter Arbeitsplatz am Feierabend.
              </p>
              <ul style={{ listStyle: "none", display: "grid", gap: 16, marginTop: 16, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
                {[
                  ["Ehrliche Beratung", "Wir sagen auch, wenn etwas nicht nötig ist."],
                  ["Feste Ansprechpartner", "Vom ersten Anruf bis zur Endabnahme — eine Person."],
                  ["Festpreis-Garantie", "Nachträge nur bei dokumentierten Mehrleistungen."],
                  ["Aus der Region, für die Region", "Ausschließlich Mitarbeiter aus Vilshofen und Umgebung."],
                ].map(([t, d]) => (
                  <li key={t} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 24 }}>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 20, fontStyle: "italic" }}>{t}</div>
                    <div style={{ color: "var(--fg-soft)", fontSize: 15 }}>{d}</div>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <SectionHead num="— Team" eyebrow="Wer Sie trifft" title="Neun Hände, <em>ein Anspruch.</em>" />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))", gap: 32 }}>
            {TEAM.map(p => (
              <div key={p.name} className="reveal">
                <ImgWithLabel src={window.IMAGES[p.img]} label={p.name} ratio="4/5" />
                <div style={{ marginTop: 16 }}>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic" }}>{p.name}</div>
                  <div style={{ color: "var(--fg-soft)", fontSize: 14, marginTop: 4 }}>{p.role}</div>
                  <div className="h-eyebrow" style={{ marginTop: 6 }}>{p.years}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section">
        <div className="container">
          <SectionHead num="— Geschichte" eyebrow="Vom Ein-Mann-Betrieb zum Meisterhandwerk" title="Eine kurze <em>Chronik.</em>" />
          <div style={{ position: "relative", maxWidth: 800, margin: "0 auto" }}>
            <div style={{ position: "absolute", left: 100, top: 0, bottom: 0, width: 1, background: "var(--line)" }}></div>
            {TIMELINE.map(e => (
              <div key={e.year} className="reveal" style={{ display: "grid", gridTemplateColumns: "100px 32px 1fr", gap: 24, padding: "20px 0", alignItems: "start" }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 32, fontStyle: "italic", textAlign: "right" }}>{e.year}</div>
                <div style={{ position: "relative", height: 24 }}>
                  <div style={{ position: "absolute", left: 4, top: 12, width: 9, height: 9, borderRadius: "50%", background: "var(--accent)", border: "3px solid var(--bg)" }}></div>
                </div>
                <div style={{ paddingTop: 12, fontSize: 16, lineHeight: 1.55 }}>{e.t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<AboutPage />);