// Kosten-Seite: Preispakete mit Orientierungspreisen.

const KOSTEN_PAKETE = [
  { id: 'erstcheck', cat: 'erst',
    title: 'Kostenloser Erstcheck', sub: 'Online oder telefonisch',
    price: '0 €', priceNum: 0,
    desc: 'Erstes Gespräch zu Ihrer Immobilie, Ihrem Sanierungsziel und einer Förder-Einschätzung. 30–60 Minuten, ohne Verpflichtung.' },
  { id: 'check-vor-ort', cat: 'check',
    title: 'Vor-Ort-Energiecheck', sub: 'Ohne schriftlichen Bericht',
    price: '250–450 €',
    desc: 'Wir nehmen das Gebäude vor Ort auf und besprechen die Schwachstellen direkt mit Ihnen, ohne ausführlichen Bericht.' },
  { id: 'beratung-kurz', cat: 'check',
    title: 'Vor-Ort-Beratung mit Kurzbericht', sub: 'Vor-Ort-Termin + schriftliche Empfehlung',
    price: '600–1.000 €',
    desc: 'Aufnahme vor Ort plus schriftlicher Kurzbericht mit konkreten Sanierungsempfehlungen und einer ersten Förder-Übersicht.' },
  { id: 'isfp-efh', cat: 'isfp',
    title: 'iSFP Einfamilienhaus', sub: 'Individueller Sanierungsfahrplan',
    price: '1.300–1.800 €',
    desc: 'Vollständiger iSFP nach BAFA-Richtlinie. Inklusive 50 % BAFA-Förderung wird Ihr Eigenanteil entsprechend reduziert.',
    highlight: true },
  { id: 'isfp-zfh', cat: 'isfp',
    title: 'iSFP Zweifamilienhaus', sub: 'Individueller Sanierungsfahrplan',
    price: '1.600–2.500 €',
    desc: 'iSFP für Zweifamilienhäuser. Höherer Aufwand bei Aufnahme und Bilanzierung. BAFA-Förderung reduziert den Eigenanteil.' },
  { id: 'isfp-mfh', cat: 'isfp',
    title: 'iSFP Mehrfamilienhaus', sub: 'Individueller Sanierungsfahrplan',
    price: '2.500–5.000 €',
    desc: 'iSFP für Mehrfamilienhäuser. BAFA-Förderung von 50 %, maximal 850 € Erstattung pro Wohneinheit (ab 3 WE), sichert spürbaren Eigenanteil-Vorteil.' },
  { id: 'antrag-em', cat: 'foerder',
    title: 'Förderantrag Einzelmaßnahme', sub: 'Vorbereitung & Einreichung',
    price: '450–650 €',
    desc: 'Technische Projektbeschreibung, Nachweisunterlagen und Antragstellung bei BAFA oder KfW für eine Einzelmaßnahme.' },
  { id: 'baubegl-klein', cat: 'baubegl',
    title: 'Baubegleitung kleine Einzelmaßnahme', sub: 'z. B. Dämmung, Fenster',
    price: '1.000–2.500 €',
    desc: 'Begleitung einer einzelnen Maßnahme: Angebotsprüfung, Bauabnahme und Verwendungsnachweis. 50 % BAFA-Förderung möglich.' },
  { id: 'baubegl-gross', cat: 'baubegl',
    title: 'Baubegleitung größere Sanierung', sub: 'Mehrere Gewerke',
    price: '3.000–8.000 €',
    desc: 'Umfassende Baubegleitung über mehrere Gewerke und Bauabschnitte. Pflicht bei KfW-Effizienzhaus-Förderung.' },
  { id: 'heizlast', cat: 'berechnung',
    title: 'Heizlastberechnung', sub: 'Raumweise nach DIN EN 12831',
    price: '500–1.500 €',
    desc: 'Voraussetzung für korrekte Heizungsdimensionierung und Wärmepumpen-Auslegung. Pflicht für jede BEG-geförderte Heizung.' },
  { id: 'wp-pruef', cat: 'berechnung',
    title: 'Wärmepumpen-Angebotsprüfung', sub: 'Pro Angebot',
    price: '150–300 €',
    desc: 'Unabhängige Prüfung eines Wärmepumpen-Angebots: Auslegung, Vorlauftemperatur, Effizienz, Wirtschaftlichkeit und Förderfähigkeit.' },
];

const KOSTEN_KATEGORIEN = [
  { id: 'erst', label: 'Erstkontakt' },
  { id: 'check', label: 'Vor-Ort-Check' },
  { id: 'isfp', label: 'iSFP' },
  { id: 'foerder', label: 'Förderantrag' },
  { id: 'baubegl', label: 'Baubegleitung' },
  { id: 'berechnung', label: 'Berechnungen' },
];

const Kosten = ({ go }) => {
  const { isMobile } = useViewport();
  return (
    <div>
      <PageHero
        eyebrow="Kosten"
        title="Transparente Preise ohne Überraschungen"
        subtitle="Hier finden Sie Orientierungswerte für die häufigsten Leistungen. Das verbindliche Honorar erhalten Sie nach einer kurzen Vorab-Klärung passend zu Ihrem Gebäude und Vorhaben."
      >
        <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
          <Button variant="accent" size="lg" onClick={() => go('contact')}>Angebot anfragen</Button>
          <Button variant="ghost" size="lg" onClick={() => go('foerderung')}>Förderung ansehen</Button>
        </div>
      </PageHero>

      {/* Highlights */}
      <Section tight style={{ paddingTop: 0 }}>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--bg-elev)' }}>
            {[
              { l: 'Erstcheck', v: '0 €', s: 'Online oder telefonisch, unverbindlich' },
              { l: 'BAFA-Förderung auf Beratung', v: '50 %', s: 'Reduziert Ihren Eigenanteil deutlich' },
              { l: 'Baubegleitung Förderung', v: '50 %', s: 'Bei KfW-Förderung Pflichtleistung' },
            ].map((x, i) => (
              <div key={i} style={{ padding: isMobile ? '22px 22px' : '28px 30px', borderLeft: !isMobile && i ? '1px solid var(--line)' : 'none', borderTop: isMobile && i ? '1px solid var(--line)' : 'none' }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 14 }}>{x.l}</div>
                <div style={{ fontFamily: "'Inter Tight',sans-serif", fontWeight: 700, fontSize: 40, letterSpacing: '-0.03em', lineHeight: 1, color: 'var(--accent)' }}>{x.v}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 10 }}>{x.s}</div>
              </div>
            ))}
          </div>
        </Container>
      </Section>

      {/* Pakete-Tabelle */}
      <Section tight>
        <Container>
          <Eyebrow>Leistungspakete & Preise</Eyebrow>
          <h2 style={{ fontSize: 'clamp(32px,3.6vw,46px)', marginTop: 18, marginBottom: 28, maxWidth: 760 }}>Orientierungspreise für die häufigsten Leistungen</h2>

          {KOSTEN_KATEGORIEN.map(kat => {
            const items = KOSTEN_PAKETE.filter(p => p.cat === kat.id);
            if (!items.length) return null;
            return (
              <div key={kat.id} style={{ marginBottom: 40 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 14, paddingBottom: 12, borderBottom: '1px solid var(--line)' }}>
                  <h3 style={{ fontSize: 20, letterSpacing: '-0.01em' }}>{kat.label}</h3>
                  <span className="mono" style={{ fontSize: 11, letterSpacing: '0.06em', color: 'var(--ink-4)' }}>{items.length} {items.length === 1 ? 'PAKET' : 'PAKETE'}</span>
                </div>
                <div style={{ background: 'var(--bg-elev)', border: '1px solid var(--line)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
                  {items.map((p, i) => (
                    <div key={p.id} style={{
                      display: 'grid',
                      gridTemplateColumns: isMobile ? '1fr auto' : '1.4fr 2fr 1fr',
                      gap: isMobile ? 8 : 24,
                      padding: isMobile ? '18px 18px' : '22px 26px',
                      borderTop: i ? '1px solid var(--line)' : 'none',
                      alignItems: isMobile ? 'flex-start' : 'center',
                      background: p.highlight ? 'var(--accent-soft)' : 'transparent',
                    }}>
                      <div>
                        <div style={{ fontFamily: "'Inter Tight',sans-serif", fontWeight: 600, fontSize: 16.5, marginBottom: 4 }}>{p.title}</div>
                        <div style={{ fontSize: 12.5, color: 'var(--ink-4)', marginBottom: isMobile ? 8 : 0 }}>{p.sub}</div>
                        {isMobile && <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.55 }}>{p.desc}</div>}
                      </div>
                      {!isMobile && <div style={{ fontSize: 13.5, color: 'var(--ink-3)', lineHeight: 1.55 }}>{p.desc}</div>}
                      <div style={{ textAlign: 'right' }}>
                        <div className="mono" style={{ fontFamily: "'Inter Tight',sans-serif", fontWeight: 700, fontSize: p.priceNum === 0 ? (isMobile ? 22 : 28) : (isMobile ? 16 : 20), letterSpacing: '-0.01em', color: p.priceNum === 0 ? 'var(--accent)' : 'var(--ink)', whiteSpace: 'nowrap' }}>{p.price}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            );
          })}
        </Container>
      </Section>

      {/* Hinweise */}
      <Section tight style={{ paddingTop: 0 }}>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 12 : 16 }}>
            <Card>
              <Eyebrow>Was im Honorar enthalten ist</Eyebrow>
              <h3 style={{ fontSize: 22, marginTop: 14, marginBottom: 14 }}>Klarer Leistungsumfang</h3>
              <div style={{ display: 'grid', gap: 10 }}>
                {[
                  'Vor-Ort-Termin und Aufmaß',
                  'Energetische Berechnung und Bilanzierung',
                  'Schriftlicher Bericht (je nach Paket)',
                  'Förder-Übersicht für Ihr Gebäude',
                  'Persönliche Nachbesprechung',
                ].map((t, i) => (
                  <div key={i} style={{ display: 'flex', gap: 10, fontSize: 14, color: 'var(--ink-2)' }}>
                    <Check size={16} color="var(--accent)" />{t}
                  </div>
                ))}
              </div>
            </Card>
            <Card style={{ background: 'var(--bg-deep)', color: 'var(--bg-elev)', borderColor: 'var(--bg-deep)' }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 14 }}>Förderung anrechnen</div>
              <h3 style={{ fontSize: 22, marginBottom: 14, color: 'var(--bg-elev)' }}>BAFA reduziert Ihren Eigenanteil</h3>
              <p style={{ fontSize: 14.5, color: 'rgba(255,255,255,.75)', lineHeight: 1.6, marginBottom: 18 }}>Bei iSFP, BAFA-Vor-Ort-Beratung und Baubegleitung übernimmt die Förderung 50 % des Beratungshonorars (gedeckelt). Wir weisen die Erstattung auf jedem Angebot transparent aus.</p>
              <Button variant="accent" onClick={() => go('foerderung')}>Förderung im Detail →</Button>
            </Card>
          </div>
        </Container>
      </Section>

      {/* Disclaimer */}
      <Section tight style={{ paddingTop: 0 }}>
        <Container>
          <div style={{ background: 'var(--bg)', border: '1px dashed var(--line-2)', borderRadius: 'var(--radius-lg)', padding: '24px 28px' }}>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--ink-4)', marginBottom: 10 }}>Hinweis zu den Preisen</div>
            <p style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.65, maxWidth: 880 }}>Die genannten Preise sind Orientierungswerte (zzgl. gesetzl. USt., sofern relevant). Das verbindliche Honorar hängt vom konkreten Gebäude, Umfang, Zustand der Unterlagen und der Anfahrt ab. Sie erhalten vorab ein schriftliches Angebot mit fixem Preis. Stand: 07.05.2026.</p>
          </div>
        </Container>
      </Section>

      {/* CTA */}
      <Section dark>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr', gap: isMobile ? 28 : 48, alignItems: 'center' }}>
            <div>
              <Eyebrow color="var(--accent)">Nächster Schritt</Eyebrow>
              <h2 style={{ fontSize: 'clamp(32px,3.6vw,46px)', marginTop: 18, color: 'var(--bg-elev)', maxWidth: 620 }}>Verbindliches Angebot zum Festpreis nach kurzer Vorab-Klärung</h2>
              <p style={{ color: 'rgba(255,255,255,.65)', fontSize: 17, lineHeight: 1.6, marginTop: 16, maxWidth: 580 }}>Senden Sie uns ein paar Eckdaten zu Ihrem Gebäude. Wir melden uns innerhalb von 24 Stunden mit einem Festpreis-Angebot zurück.</p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <Button variant="accent" size="lg" onClick={() => go('contact')}>Angebot anfordern →</Button>
              <Button variant="light" size="lg" onClick={() => go('calculator')}>Sanierungsrechner öffnen</Button>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
};

window.Kosten = Kosten;