/* ============================================
   Home page — Radlinger Malerbetrieb
   ============================================ */

const { useState: useS, useEffect: useE, useRef: useR } = React;

function Hero({ heroLayout }) {
  const layout = heroLayout || "split";

  if (layout === "imageRight") {
    return (
      <section className="hero" style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="container" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center", padding: "clamp(60px, 8vw, 120px) var(--pad)" }}>
          <div style={{ display: "grid", gap: 28, maxWidth: 560 }}>
            <div className="h-eyebrow reveal in">Malerbetrieb · Vilshofen seit 1978</div>
            <h1 className="display reveal in" style={{ fontSize: "clamp(48px, 6vw, 84px)" }}>
              Farbe ist <em style={{ color: "var(--accent)" }}>Handwerk</em> —<br/>
              und Vertrauen.
            </h1>
            <p className="lede reveal in">
              Innenanstriche, Fassaden und feine Lackierungen.
              Drei Generationen Radlinger arbeiten in der Region Vilshofen mit Sorgfalt, sauberer Vorbereitung und ehrlichen Materialien.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 8 }}>
              <a href="kontakt.html" className="btn btn-primary">Kostenfreies Angebot <span className="arrow">→</span></a>
              <a href="referenzen.html" className="btn btn-ghost">Projekte ansehen</a>
            </div>
          </div>
          <ImgWithLabel src={window.IMAGES.heroPaint} label="Werkstatt-Detail" ratio="4/5" />
        </div>
      </section>
    );
  }

  if (layout === "fullBleed") {
    return (
      <section style={{ position: "relative", height: "92vh", minHeight: 600, overflow: "hidden", borderBottom: "1px solid var(--line)" }}>
        <img src={window.IMAGES.heroWide} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,16,10,0.2) 0%, rgba(20,16,10,0.7) 100%)" }}></div>
        <div className="container" style={{ position: "relative", height: "100%", display: "grid", alignContent: "end", paddingBottom: 80, color: "var(--bg)" }}>
          <div className="h-eyebrow" style={{ color: "rgba(245,241,234,0.7)" }}>Malerbetrieb · Vilshofen seit 1978</div>
          <h1 className="display" style={{ fontSize: "clamp(56px, 8vw, 120px)", marginTop: 16, color: "var(--bg)" }}>
            Farbe ist <em style={{ color: "var(--accent-2)" }}>Handwerk</em>.
          </h1>
          <p className="lede" style={{ color: "rgba(245,241,234,0.85)", maxWidth: 560, marginTop: 20 }}>
            Innenanstriche, Fassaden und feine Lackierungen — mit der Sorgfalt eines Familienbetriebs.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 28 }}>
            <a href="kontakt.html" className="btn btn-primary" style={{ background: "var(--bg)", color: "var(--fg)" }}>Kostenfreies Angebot <span className="arrow">→</span></a>
            <a href="referenzen.html" className="btn btn-ghost" style={{ color: "var(--bg)", borderColor: "rgba(245,241,234,0.4)" }}>Projekte ansehen</a>
          </div>
        </div>
      </section>
    );
  }

  // Default: split editorial
  return (
    <section style={{ borderBottom: "1px solid var(--line)" }}>
      <div className="container" style={{ paddingTop: "clamp(60px, 9vw, 120px)", paddingBottom: "clamp(60px, 9vw, 120px)" }}>
        <div className="h-eyebrow reveal in" style={{ marginBottom: 32 }}>Malerbetrieb · Vilshofen seit 1978</div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "end", marginBottom: 48 }}>
          <h1 className="display" style={{ fontSize: "clamp(56px, 9vw, 140px)" }}>
            Farbe ist<br/>
            <em style={{ color: "var(--accent)" }}>Handwerk.</em>
          </h1>
          <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".15em", color: "var(--fg-mute)", textTransform: "uppercase", textAlign: "right" }}>
            Est.<br/>
            <span style={{ fontSize: 28, fontFamily: "var(--serif)", letterSpacing: 0, color: "var(--fg)", textTransform: "none", fontStyle: "italic" }}>1978</span>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 48, alignItems: "start" }}>
          <ImgWithLabel src={window.IMAGES.heroRoom} label="Innenanstrich · Wohnzimmer" ratio="16/10" />
          <div style={{ display: "grid", gap: 24, paddingTop: 24 }}>
            <p className="lede">
              Drei Generationen Radlinger arbeiten in Vilshofen und Umgebung mit Sorgfalt, sauberer Vorbereitung und ehrlichen Materialien.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="kontakt.html" className="btn btn-primary">Kostenfreies Angebot <span className="arrow">→</span></a>
              <a href="leistungen.html" className="btn btn-ghost">Leistungen</a>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, paddingTop: 24, borderTop: "1px solid var(--line)", marginTop: 8 }}>
              <div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 40, fontStyle: "italic" }}>48</div>
                <div className="h-eyebrow">Jahre Erfahrung</div>
              </div>
              <div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 40, fontStyle: "italic" }}>1.200+</div>
                <div className="h-eyebrow">Projekte</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {/* Marquee strip */}
      <div style={{ borderTop: "1px solid var(--line)", background: "var(--bg-2)", overflow: "hidden", padding: "18px 0" }}>
        <div style={{ display: "flex", gap: 64, fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".18em", textTransform: "uppercase", color: "var(--fg-soft)", whiteSpace: "nowrap", animation: "marquee 40s linear infinite" }}>
          {Array(2).fill(0).map((_, i) => (
            <React.Fragment key={i}>
              <span>· Innenanstriche</span>
              <span>· Fassaden</span>
              <span>· Lackierungen</span>
              <span>· Holz & Metall</span>
              <span>· Beratung vor Ort</span>
              <span>· Meisterbetrieb</span>
              <span>· Vilshofen · Passau · Deggendorf</span>
              <span>· Innenanstriche</span>
              <span>· Fassaden</span>
              <span>· Lackierungen</span>
              <span>· Holz & Metall</span>
              <span>· Beratung vor Ort</span>
              <span>· Meisterbetrieb</span>
              <span>· Vilshofen · Passau · Deggendorf</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  {
    n: "01",
    title: "Innenanstriche",
    blurb: "Wohnräume, Decken und Wände — von klassischem Weiß bis zu individuellen Farbtönen. Saubere Abdeckung, kantenscharfe Übergänge.",
    img: "livingRoom",
    bullets: ["Wand- & Deckenanstriche", "Tapezierarbeiten", "Spachteltechniken", "Farbberatung"],
  },
  {
    n: "02",
    title: "Fassaden & Außenanstriche",
    blurb: "Witterungsbeständige Beschichtungen für Einfamilienhäuser und Altbauten. Inklusive Untergrundprüfung und Risssanierung.",
    img: "facade1",
    bullets: ["Silikat- & Silikonharz", "Risssanierung", "Sockelschutz", "Gerüstplanung"],
  },
  {
    n: "03",
    title: "Lackierungen",
    blurb: "Feine Lackarbeiten an Türen, Fenstern, Treppen und Möbeln — mit Pinsel, Rolle oder Spritzverfahren in der Werkstatt.",
    img: "woodDetail",
    bullets: ["Holzfenster & -türen", "Heizkörper & Metall", "Treppen & Geländer", "Möbelaufarbeitung"],
  },
];

function ServicesSection() {
  return (
    <section className="section">
      <div className="container">
        <SectionHead
          num="— 01"
          eyebrow="Leistungen"
          title="Drei Disziplinen — <em>ein Anspruch.</em>"
          lede="Wir konzentrieren uns auf das, was wir am besten können. Jedes Gewerk wird vom Aufmaß bis zur Endabnahme persönlich von einem Radlinger begleitet."
        />
        <div style={{ display: "grid", gap: 1, background: "var(--line)", border: "1px solid var(--line)" }}>
          {SERVICES.map((s, i) => (
            <a key={s.n} href="leistungen.html" className="reveal" style={{
              display: "grid",
              gridTemplateColumns: "120px 1.2fr 1fr 200px",
              gap: 32,
              padding: "40px 32px",
              background: "var(--bg)",
              alignItems: "center",
              transition: "background .3s ease"
            }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-2)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "var(--bg)"}
            >
              <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".15em", color: "var(--fg-mute)" }}>{s.n}</div>
              <div>
                <h3 style={{ fontFamily: "var(--serif)", fontSize: 36, fontWeight: 500, marginBottom: 8 }}>{s.title}</h3>
                <p style={{ color: "var(--fg-soft)", fontSize: 15, maxWidth: 460 }}>{s.blurb}</p>
              </div>
              <ul style={{ listStyle: "none", display: "grid", gap: 6, fontSize: 13, color: "var(--fg-soft)" }}>
                {s.bullets.map(b => <li key={b}>· {b}</li>)}
              </ul>
              <ImgWithLabel src={window.IMAGES[s.img]} label={s.title} ratio="3/2" />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- REFERENCES TEASER ----------
const PROJECTS = [
  { id: "p1", title: "Landhaus am Donauufer", category: "Fassade · Altbau", img: "facade1", year: "2025" },
  { id: "p2", title: "Wohnung Marktplatz", category: "Innenanstrich", img: "livingRoom", year: "2025" },
  { id: "p3", title: "Holzfenster Pfarrhof", category: "Lackierung", img: "woodDetail", year: "2024" },
  { id: "p4", title: "Schlafzimmer Aldersbach", category: "Innenanstrich · Spachtel", img: "bedroom", year: "2024" },
];

function ReferencesTeaser() {
  return (
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <SectionHead
          num="— 02"
          eyebrow="Referenzen"
          title="Arbeit, die <em>bleibt.</em>"
          lede="Eine Auswahl unserer letzten Projekte aus Vilshofen und der Region — vom kleinen Renovierungsauftrag bis zur kompletten Fassadensanierung."
        />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32 }}>
          {PROJECTS.map((p, i) => (
            <a key={p.id} href="referenzen.html" className="reveal" style={{ display: "block" }}>
              <ImgWithLabel src={window.IMAGES[p.img]} label={p.title} ratio="4/3" />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginTop: 16 }}>
                <div>
                  <div className="h-eyebrow">{p.category}</div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 24, fontStyle: "italic", marginTop: 4 }}>{p.title}</div>
                </div>
                <div style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".15em", color: "var(--fg-mute)" }}>{p.year}</div>
              </div>
            </a>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 48 }}>
          <a href="referenzen.html" className="btn btn-ghost">Alle Referenzen <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

// ---------- ABOUT TEASER ----------
function AboutTeaser() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "center" }}>
          <ImgWithLabel src={window.IMAGES.craftsman} label="Werkstatt Radlinger" ratio="4/5" className="reveal" />
          <div className="reveal" style={{ display: "grid", gap: 24 }}>
            <div className="h-eyebrow">— 03 · Über uns</div>
            <h2 className="h-section">Drei Generationen, <em>eine Werkstatt.</em></h2>
            <p className="lede">
              1978 von Josef Radlinger als kleiner Ein-Mann-Betrieb in Vilshofen gegründet, ist die Werkstatt heute in dritter Generation in Familienhand. Alle Mitarbeiter sind ausgebildete Maler und Lackierer aus der Region.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
              <Stat n="1978" label="Gegründet" />
              <Stat n="9" label="Mitarbeiter" />
              <Stat n="100%" label="Region Vilshofen" />
            </div>
            <div style={{ marginTop: 8 }}>
              <a href="ueber-uns.html" className="btn btn-ghost">Mehr über den Betrieb <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Stat({ n, label }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--serif)", fontSize: 40, fontStyle: "italic", lineHeight: 1 }}>{n}</div>
      <div className="h-eyebrow" style={{ marginTop: 6 }}>{label}</div>
    </div>
  );
}

// ---------- TESTIMONIALS ----------
const TESTIMONIALS = [
  { quote: "Sauber, pünktlich, freundlich — und nach drei Tagen war keine Spur mehr von der Baustelle. Wir empfehlen den Betrieb gerne weiter.", author: "Familie Wagner", place: "Vilshofen" },
  { quote: "Die Beratung zur Farbgestaltung war ehrlich und ohne Verkaufsdruck. Das Ergebnis im Wohnzimmer ist genau, wie wir es uns erhofft haben.", author: "Andrea M.", place: "Aldersbach" },
  { quote: "Unsere Fassade hat dringend einen neuen Anstrich gebraucht. Herr Radlinger hat alles in Ruhe erklärt, das Gerüst kam pünktlich, der Preis stimmte.", author: "Hans G.", place: "Ortenburg" },
];

function Testimonials() {
  const [i, setI] = useS(0);
  useE(() => {
    const t = setInterval(() => setI(x => (x + 1) % TESTIMONIALS.length), 7000);
    return () => clearInterval(t);
  }, []);
  const t = TESTIMONIALS[i];
  return (
    <section className="section" style={{ background: "var(--fg)", color: "var(--bg)" }}>
      <div className="container">
        <div style={{ display: "grid", gap: 40, maxWidth: 900, margin: "0 auto", textAlign: "center" }}>
          <div className="h-eyebrow" style={{ color: "rgba(245,241,234,0.6)", justifySelf: "center" }}>— 04 · Kundenstimmen</div>
          <p className="display" style={{ fontSize: "clamp(28px, 4vw, 48px)", lineHeight: 1.2 }}>
            „{t.quote}"
          </p>
          <div>
            <div style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic" }}>{t.author}</div>
            <div className="h-eyebrow" style={{ color: "rgba(245,241,234,0.5)", marginTop: 4 }}>{t.place}</div>
          </div>
          <div style={{ display: "flex", gap: 8, justifyContent: "center" }}>
            {TESTIMONIALS.map((_, idx) => (
              <button key={idx} onClick={() => setI(idx)} aria-label={`Zitat ${idx + 1}`} style={{
                width: idx === i ? 32 : 8, height: 8, borderRadius: 4,
                background: idx === i ? "var(--accent-2)" : "rgba(245,241,234,0.3)",
                transition: "all .3s"
              }}></button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- CTA ----------
function CTA() {
  return (
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "center" }}>
          <div className="reveal">
            <div className="h-eyebrow">— 05 · Anfrage</div>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Sie haben ein Projekt im Kopf?<br/>
              <em>Lassen Sie uns reden.</em>
            </h2>
            <p className="lede" style={{ marginTop: 20 }}>
              Wir besichtigen Ihr Objekt persönlich, hören zu, und schicken Ihnen ein verbindliches Angebot — kostenfrei und unverbindlich.
            </p>
          </div>
          <div className="reveal" style={{ background: "var(--bg)", padding: 32, border: "1px solid var(--line)" }}>
            <div style={{ display: "grid", gap: 16, fontSize: 14 }}>
              <div>
                <div className="h-eyebrow">Telefon</div>
                <a href="tel:+4985419998877" style={{ fontFamily: "var(--serif)", fontSize: 28, fontStyle: "italic", display: "block", marginTop: 4 }}>+49 8541 999 88 77</a>
              </div>
              <div style={{ borderTop: "1px solid var(--line)", paddingTop: 16 }}>
                <div className="h-eyebrow">E-Mail</div>
                <a href="mailto:info@radlinger-malerei.de" style={{ fontFamily: "var(--serif)", fontSize: 22, fontStyle: "italic", display: "block", marginTop: 4 }}>info@radlinger-malerei.de</a>
              </div>
              <a href="kontakt.html" className="btn btn-primary" style={{ justifyContent: "center", marginTop: 8 }}>
                Anfrageformular öffnen <span className="arrow">→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- APP ----------
function App() {
  useReveal();

  useE(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", "#6b4f35");
    r.style.setProperty("--accent-2", "#c9a87a");
    r.style.setProperty("--bg", "#f5f1ea");
    r.style.setProperty("--fg", "#1a1a1a");
    r.style.setProperty("--serif", '"Cormorant Garamond", "Times New Roman", serif');
  }, []);

  return (
    <>
      <Nav active="home" />
      <Hero heroLayout="split" />
      <ServicesSection />
      <ReferencesTeaser />
      <AboutTeaser />
      <Testimonials />
      <CTA />
      <Footer />
    </>
  );
}

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