// KontaktKombiHifi.jsx — Hi-Fi Kontakt (Kombi-Variante) eingebaut in den UI-Kit-Prototyp.
// Schmaler Page-Title · Zwei kompakte Voice-Inseln · Kanal-Grid (alle Wege)
// · Formular + Adresse/Karte

function ChannelCard({ icon, eyebrow, eyebrowColor, title, body, value, action, accent = 'var(--brand-accent)' }) {
  return (
    <div style={{
      background: 'var(--surface)', border: '1px solid var(--line)',
      padding: '28px 24px 26px',
      display: 'flex', flexDirection: 'column', gap: 14,
      minHeight: 220, position: 'relative',
      transition: 'border-color .18s, box-shadow .18s',
    }}>
      <div style={{
        width: 44, height: 44, borderRadius: '50%',
        background: 'var(--brand-accent-soft)',
        border: `1px solid ${accent}`,
        color: accent,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>{icon}</div>
      <div style={{ font: '600 9.5px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase', color: eyebrowColor || accent }}>
        {eyebrow}
      </div>
      <h4 style={{ margin: 0, font: '400 19px/1.25 var(--f-display)', color: 'var(--ink-900)', letterSpacing: '-.005em' }}>
        {title}
      </h4>
      {body && (
        <p style={{ margin: 0, font: '300 14px/1.55 var(--f-body)', color: 'var(--ink-500)', flex: 1 }}>
          {body}
        </p>
      )}
      {value && (
        <div style={{ marginTop: 'auto', font: '500 15px/1.3 var(--f-body)', color: 'var(--ink-900)', fontVariantNumeric: 'tabular-nums' }}>
          {value}
        </div>
      )}
      {action && (
        <a href="#" style={{
          marginTop: value ? 4 : 'auto',
          font: '600 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase',
          color: accent, textDecoration: 'none',
          paddingBottom: 4, borderBottom: `1px solid ${accent}`,
          alignSelf: 'flex-start',
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>{action}<ArrowRight size={10} color={accent}/></a>
      )}
    </div>
  );
}

function KontaktKombi() {
  return (
    <div>
      {/* — Page-Title — */}
      <HeroFoto page="kontakt" style={{padding:'72px var(--page-x) 64px'}}>
        <div style={{ position: 'relative' }}>
          <span style={{
            font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
          }}>
            <span style={{width:6, height:6, borderRadius:'50%', background:'var(--brand-accent)'}}/>
            Kontakt
          </span>
          <h1 style={{
            margin: '20px 0 12px',
            fontFamily: 'var(--f-body)', fontWeight: 300,
            fontSize: 36, lineHeight: 1.15, letterSpacing: '-.015em',
            color: 'var(--ink-900)', maxWidth: '18ch',
          }}>
            So erreichen Sie <em style={{ fontStyle: 'normal', fontFamily: 'var(--f-display)', fontWeight: 400, color: 'var(--brand-accent)', fontSize: 40 }}>uns.</em>
          </h1>
          <p style={{
            margin: '0', maxWidth: '54ch',
            color: 'var(--ink-700)', fontSize: 16, lineHeight: 1.7,
          }}>
            Wählen Sie den Weg, der zu Ihrer Situation passt — und zu Ihrem Tempo.
          </p>
        </div>
      </HeroFoto>

      {/* Breadcrumb */}
      <div style={{padding:'14px var(--page-x)', background:'var(--surface-paper)', borderTop:'1px solid var(--line-soft)', borderBottom:'1px solid var(--line-soft)', font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'var(--ink-warm-mute)'}}>
        <div style={{maxWidth:'var(--page-max-w)', margin:'0 auto'}}>
          <a href="#" style={{color:'var(--ink-warm-mute)', textDecoration:'none'}}>Home</a>
          &emsp;›&emsp;
          <span style={{color:'var(--brand-accent)'}}>Kontakt</span>
        </div>
      </div>

      {/* — Zwei kompakte Inseln — */}
      <section style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
        borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
      }}>
        {/* Trauerfall */}
        <article style={{
          background: 'var(--mode-traue-portal-bg)',
          color: 'var(--mode-traue-island-fg)',
          padding: '56px 56px 52px',
          position: 'relative',
          display: 'flex', flexDirection: 'column', gap: 18,
        }}>
          <ModusEyebrow tone="trauerfall" onDark/>
          <h2 style={{
            margin: 0,
            fontFamily: 'var(--f-body)', fontWeight: 300,
            fontSize: 34, lineHeight: 1.15, letterSpacing: '-.01em',
            color: 'var(--mode-traue-island-fg)', maxWidth: '18ch',
          }}>
            Tag und Nacht <em style={{ fontStyle: 'normal', fontFamily: 'var(--f-display)', fontWeight: 300, color: 'var(--mode-traue-island-eyebrow)', fontSize: 38 }}>für Sie da.</em>
          </h2>
          <p style={{ margin: 0, color: 'var(--mode-traue-island-muted)', maxWidth: '34ch', fontSize: 14.5, lineHeight: 1.75 }}>
            Rufen Sie an. Wir nehmen ab, hören zu und besprechen die nächsten Schritte in Ruhe.
          </p>
          <a href="tel:053614222" style={{
            marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 14,
            padding: '16px 28px 16px 20px',
            background: 'var(--mode-traue-cta-bg)', color: '#fff',
            textDecoration: 'none', alignSelf: 'flex-start',
            boxShadow: '0 16px 36px -12px var(--mode-traue-cta-glow), inset 0 1px 0 rgba(255,255,255,.18)',
          }}>
            <span style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(255,255,255,.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <PhoneIcon size={18} color="#fff"/>
            </span>
            <span>
              <span style={{ display: 'block', font: '500 22px/1 var(--f-body)' }}>05361 · 4 22 22</span>
              <span style={{ display: 'block', font: '600 9px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase', color: 'rgba(255,255,255,.78)', marginTop: 5 }}>24 h erreichbar</span>
            </span>
          </a>
        </article>

        {/* Vorsorge */}
        <article style={{
          background: 'var(--mode-vor-stage-bg)',
          padding: '56px 56px 52px',
          position: 'relative',
          display: 'flex', flexDirection: 'column', gap: 18,
        }}>
          <ModusEyebrow tone="vorsorge"/>
          <h2 style={{
            margin: 0,
            fontFamily: 'var(--f-body)', fontWeight: 300,
            fontSize: 34, lineHeight: 1.15, letterSpacing: '-.01em',
            color: 'var(--ink-900)', maxWidth: '20ch',
          }}>
            Vorausgedacht, <em style={{ fontStyle: 'normal', fontFamily: 'var(--f-display)', fontWeight: 400, color: 'var(--mode-vor-accent-ink)', fontSize: 38 }}>entlastend.</em>
          </h2>
          <p style={{ margin: 0, color: 'var(--ink-500)', maxWidth: '34ch', fontSize: 14.5, lineHeight: 1.75 }}>
            Termin für ein Vorsorgegespräch — schriftlich, telefonisch oder vor Ort.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 6, flexWrap: 'wrap' }}>
            <a href="#" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '12px 22px 12px 16px',
              background: 'linear-gradient(135deg,var(--accent-vorsorge),var(--accent-vorsorge-ink))',
              color: '#fff', textDecoration: 'none',
              boxShadow: '0 14px 28px -10px rgba(106,120,106,.45), inset 0 1px 0 rgba(255,255,255,.18)',
            }}>
              <span style={{ width: 26, height: 26, borderRadius: '50%', background: 'rgba(255,255,255,.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <CalendarIcon size={13} color="#fff"/>
              </span>
              <span style={{ font: '500 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase' }}>Termin vereinbaren</span>
            </a>
            <a href="#" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '12px 20px',
              background: 'transparent', color: 'var(--accent-vorsorge-ink)',
              textDecoration: 'none', border: '1px solid var(--accent-vorsorge)',
              font: '500 11px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase',
            }}>Rückruf</a>
          </div>
        </article>
      </section>

      {/* — Kanal-Grid (alle Wege) — */}
      <section style={{ padding:'96px var(--page-x) 64px', background: 'var(--surface)' }}>
        <div style={{ maxWidth: 1140, margin: '0 auto' }}>
          <SectionHeader
            eyebrow="Alle Wege auf einen Blick"
            title="Acht Wege —"
            accent="ein Anliegen."
            sub="Manche möchten anrufen. Andere lieber schreiben. Manche kommen vorbei. Alles ist richtig."
          />
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
            marginTop: 32,
          }}>
            <ChannelCard
              icon={<PhoneIcon size={18}/>}
              eyebrow="Trauerfall · 24 h"
              eyebrowColor="var(--accent-trauerfall)"
              accent="var(--accent-trauerfall)"
              title="Telefon rund um die Uhr"
              body="Wir nehmen ab — auch nachts. Sie müssen nichts vorbereiten."
              value="05361 · 4 22 22"
              action="Anrufen"/>
            <ChannelCard
              icon={<PhoneIcon size={18}/>}
              eyebrow="Geschäftszeiten"
              title="Telefon · Büro"
              body="Für Vorsorge-Themen und nicht-akute Anliegen."
              value="Mo–Fr · 9–17 Uhr"
              action="Anrufen"/>
            <ChannelCard
              icon={<MailIcon size={18}/>}
              eyebrow="E-Mail"
              title="Schriftlich schreiben"
              body="Wir antworten innerhalb eines Werktags."
              value="kontakt@tschense-bestattungen.de"
              action="E-Mail öffnen"/>
            <ChannelCard
              icon={<WhatsAppIcon size={18}/>}
              eyebrow="Messenger"
              title="WhatsApp"
              body="Wenn Reden zu viel ist — eine kurze Nachricht reicht."
              action="Chat öffnen"/>
            <ChannelCard
              icon={<PinIcon size={18}/>}
              eyebrow="Vor Ort"
              eyebrowColor="var(--accent-vorsorge-ink)"
              accent="var(--accent-vorsorge)"
              title="Persönlich vorbei­kommen"
              body="Wir öffnen für Sie — rufen Sie kurz vorher an."
              value="Kurt-Schumacher-Ring 256"
              action="Route planen"/>
            <ChannelCard
              icon={<ClockIcon size={18}/>}
              eyebrow="Rückruf"
              title="Wir rufen Sie an"
              body="Geben Sie Ihre Wunschzeit an — wir melden uns binnen zwei Werktagen."
              action="Anfragen"/>
            <ChannelCard
              icon={<DocIcon size={18}/>}
              eyebrow="Schriftlich"
              title="Kontaktformular"
              body="Strukturiert, wenn Sie Details mitteilen möchten."
              action="Zum Formular"/>
            <ChannelCard
              icon={<CalendarIcon size={18}/>}
              eyebrow="Vorsorge"
              eyebrowColor="var(--accent-vorsorge-ink)"
              accent="var(--accent-vorsorge)"
              title="Termin vereinbaren"
              body="Für ein Beratungsgespräch zur Bestattungsvorsorge."
              action="Termin buchen"/>
          </div>
        </div>
      </section>

      {/* — Formular + Adresse/Karte — */}
      <section style={{ padding:'32px var(--page-x) 96px', background: 'var(--surface-warm)' }}>
        <div style={{
          maxWidth: 1140, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 56,
        }}>
          {/* Formular */}
          <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', padding: '48px 48px 44px' }}>
            <span style={{
              font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
              color:'var(--brand-accent)',
            }}>Kontaktformular</span>
            <h2 style={{
              margin: '14px 0 8px',
              fontFamily: 'var(--f-display)', fontWeight: 300,
              fontSize: 32, lineHeight: 1.15, letterSpacing: '-.01em',
              color: 'var(--ink-900)',
            }}>
              Schreiben Sie uns — <em style={{ fontStyle: 'normal', fontWeight: 400, color: 'var(--brand-accent)' }}>wir lesen jede Zeile.</em>
            </h2>
            <p style={{ margin: '10px 0 32px', color: 'var(--ink-500)', fontSize: 14.5, lineHeight: 1.7 }}>
              Was uns geschickt hat, hängt von Ihrer Situation ab. Bitte erzählen Sie uns kurz, wie wir helfen können.
            </p>
            <form style={{ display: 'flex', flexDirection: 'column', gap: 22 }} onSubmit={e => e.preventDefault()}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
                <Field label="Name" placeholder="Ihr Name" required/>
                <Field label="Telefon" type="tel" placeholder="05361 · 4 22 22"/>
              </div>
              <Field label="E-Mail" type="email" placeholder="ihre@e-mail.de"/>
              <Field label="Ihre Nachricht" type="textarea" placeholder="Wie können wir helfen?"/>
              <label style={{ display:'flex', gap:14, alignItems:'flex-start', fontSize:12, color:'var(--ink-500)', lineHeight:1.5, cursor:'pointer' }}>
                <span style={{ flexShrink:0, width:18, height:18, background:'var(--brand-accent)', display:'flex', alignItems:'center', justifyContent:'center', marginTop:1 }}>
                  <svg width="12" height="12" viewBox="0 0 20 20" fill="none" stroke="#fff" strokeWidth="2.5"><path d="M5 10l3 3 7-7"/></svg>
                </span>
                <span>Mit dem Absenden erkläre ich mich damit einverstanden, dass meine Daten zur Bearbeitung meines Anliegens verwendet werden.</span>
              </label>
              <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginTop: 4 }}>
                <Button variant="primary" type="submit">Senden</Button>
                <Button variant="link">Abbrechen</Button>
              </div>
            </form>
          </div>

          {/* Adresse + Karte */}
          <aside style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', padding: '32px 32px 36px' }}>
              <span style={{
                font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
                color:'var(--brand-accent)',
              }}>Anschrift</span>
              <h3 style={{
                margin: '14px 0 18px',
                font: '300 26px/1.2 var(--f-display)',
                color: 'var(--ink-900)',
              }}>Tschense Bestattungen</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <PinIcon size={16} color="var(--brand-accent)"/>
                  <div style={{ color: 'var(--ink-700)', fontSize: 15, lineHeight: 1.6 }}>
                    Kurt-Schumacher-Ring 256<br/>38444 Wolfsburg
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', borderTop: '1px solid var(--line)', paddingTop: 14, marginTop: 4 }}>
                  <ClockIcon size={16} color="var(--brand-accent)"/>
                  <div style={{ color: 'var(--ink-500)', fontSize: 14, lineHeight: 1.6 }}>
                    Mo–Fr · 9–17 Uhr<br/>
                    <span style={{ color: 'var(--accent-trauerfall)', fontWeight: 600 }}>Im Trauerfall: rund um die Uhr</span>
                  </div>
                </div>
              </div>
            </div>
            <div style={{
              flex: 1, minHeight: 320, position: 'relative', overflow: 'hidden',
              border: '1px solid var(--line)',
            }}>
              <iframe
                title="Tschense Bestattungen · Karte"
                src="https://www.google.com/maps?q=Kurt-Schumacher-Ring%20256%2C%2038444%20Wolfsburg&output=embed"
                width="100%" height="100%"
                style={{ border: 0, display: 'block', filter: 'grayscale(.55) contrast(.92) brightness(.92)', position: 'absolute', inset: 0 }}
                loading="lazy" referrerPolicy="no-referrer-when-downgrade"/>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { KontaktKombi, ChannelCard });