---
import BaseLayout from "../layouts/BaseLayout.astro";
import SectionIntro from "../components/SectionIntro.astro";
import ContactPanel from "../components/ContactPanel.astro";
import { partners, references, services, site, timeline } from "../data/site";

const structuredData = {
  "@context": "https://schema.org",
  "@type": "RoofingContractor",
  name: site.name,
  url: site.url,
  telephone: site.phone,
  email: site.email,
  address: {
    "@type": "PostalAddress",
    streetAddress: "Zinnhütte 8",
    postalCode: "21255",
    addressLocality: "Tostedt",
    addressCountry: "DE",
  },
  areaServed: ["Tostedt", "Hamburg", "Bremen", "Buchholz in der Nordheide", "Nordheide"],
};
---

<BaseLayout title="Bedachung und Bauklempnerei aus Tostedt" description="Heinz Heidrich GmbH aus Tostedt: Dacheindeckung, Dachsanierung, Flachdach, Bauklempnerei, Photovoltaik, Wartung und Reparatur.">
  <script type="application/ld+json" set:html={JSON.stringify(structuredData)} />

  <section class="hero">
    <div class="container hero-grid">
      <div class="hero-copy">
        <p class="label">Seit 1963 in Tostedt</p>
        <h1>Dächer, die <span>halten.</span></h1>
        <p class="lead">Bedachung, Bauklempnerei, Sanierung und Service für private, gewerbliche und öffentliche Projekte.</p>
        <div class="hero-actions">
          <a class="button primary" href="/kontakt/">Kontakt aufnehmen</a>
          <a class="button secondary" href="/leistungen/">Leistungen ansehen</a>
        </div>
      </div>
      <figure class="hero-media">
        <img src="/assets/img/firmengelaende-luftaufnahme.jpg" alt="Luftaufnahme des Firmengeländes der Heinz Heidrich GmbH in Tostedt" width="1600" height="900" />
      </figure>
    </div>
  </section>

  <section class="stats-strip" aria-label="Unternehmensdaten">
    <div class="stat">
      <strong>60+</strong>
      <span>Jahre Erfahrung</span>
    </div>
    <div class="stat">
      <strong>75+</strong>
      <span>Menschen im Team</span>
    </div>
    <div class="stat">
      <strong>200+</strong>
      <span>ausgebildete Lehrlinge</span>
    </div>
  </section>

  <section class="section">
    <div class="container">
      <SectionIntro title="Handwerk mit breitem Dachwissen" text="Von klassischer Eindeckung bis energetischer Sanierung: Das Team plant und setzt Dacharbeiten mit eigenen Fachkräften um." />
      <div class="service-grid">
        {services.map((service) => (
          <article class="service-card">
            <img src={service.image} alt="" loading="lazy" width="895" height="665" />
            <div class="service-card-content">
              <h3>{service.title}</h3>
              <p>{service.summary}</p>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>

  <section class="section alt">
    <div class="container split-grid">
      <div class="copy-stack">
        <h2>Hochwertiges Dachdeckerhandwerk hat bei uns Tradition.</h2>
        <p>Seit 1963 ist die Heinz Heidrich GmbH in Tostedt verwurzelt und in der Region Hamburg, Bremen, Buchholz und Nordheide unterwegs.</p>
        <p>Das Unternehmen verbindet langjährige Erfahrung mit moderner Technik, eigener Ausbildung und einem Team aus Dachdeckern, Klempnern, Zimmerern, Meistern und Büro.</p>
        <div class="inline-actions">
          <a class="button primary" href="/das-unternehmen/">Unternehmen kennenlernen</a>
          <a class="button secondary" href="/60-jahre-heinz-heidrich-gmbh/">60 Jahre lesen</a>
        </div>
      </div>
      <figure class="feature-image">
        <img src="/assets/img/geschaeftsfuehrung.jpg" alt="Christian und Heiner Heidrich auf dem Firmengelände" loading="lazy" width="1024" height="683" />
      </figure>
    </div>
  </section>

  <section class="section">
    <div class="container split-grid reverse">
      <figure class="feature-image">
        <img src="/assets/img/firmengelaende-blaues-dach.jpg" alt="Firmengelände mit blauem Dach und Fahrzeugen" loading="lazy" width="1600" height="900" />
      </figure>
      <div class="copy-stack">
        <h2>Aus der Region, für die Region.</h2>
        <p>Die Baustellen reichen vom Einfamilienhaus bis zu großen gewerblichen und öffentlichen Projekten. Heidrich betreut Dacheindeckung, Fassadenbekleidung, Abdichtung, Reparatur und Wartung.</p>
        <ul class="check-list">
          {references.slice(0, 5).map((reference) => <li>{reference}</li>)}
        </ul>
        <a class="button secondary" href="/referenzen/">Referenzen ansehen</a>
      </div>
    </div>
  </section>

  <section class="section field">
    <div class="container split-grid">
      <div class="copy-stack">
        <h2>Wir bilden aus und suchen Verstärkung.</h2>
        <p>Wer im Dachdecker-, Klempner- oder Zimmererhandwerk arbeiten möchte, findet in Tostedt ein großes Team, moderne Ausstattung und echte Baustellenvielfalt.</p>
        <a class="button primary" href="/jobs/">Zu den Jobs</a>
      </div>
      <ContactPanel title="Schnell erreichbar" text="Ob Projektanfrage oder Bewerbung: Wir antworten direkt aus Tostedt." />
    </div>
  </section>

  <section class="section">
    <div class="container">
      <SectionIntro title="Ein Betrieb mit Geschichte" text="Aus einem kleinen Dachdeckerbetrieb wurde ein großes Familienunternehmen mit gewachsener Verantwortung." />
      <div class="timeline">
        {timeline.slice(0, 6).map(([year, text]) => (
          <div class="timeline-item">
            <div class="timeline-year">{year}</div>
            <p>{text}</p>
          </div>
        ))}
      </div>
    </div>
  </section>

  <section class="section alt">
    <div class="container">
      <SectionIntro title="Materialpartner" text="Bei Dachfenstern, Dachsteinen, Abdichtung und Metall setzt Heidrich auf bewährte Hersteller." />
      <div class="partner-grid">
        {partners.map((partner) => (
          <a href={partner.href} target="_blank" rel="noreferrer">
            <img src={partner.logo} alt={partner.name} loading="lazy" />
          </a>
        ))}
      </div>
    </div>
  </section>
</BaseLayout>
