// KontaktInselnHifi.jsx — Hi-Fi Kontakt (Inseln-Variante) eingebaut in den UI-Kit-Prototyp.
// Schmaler Page-Title · Zwei Voice-Inseln (Trauerfall + Vorsorge)
// · Formular + Adresse/Karte

function ChannelRow({ icon, title, value, action, voice = 'neutral', onDark = false }) {
  const accent =
    voice === 'trauerfall' ? 'var(--mode-traue-island-eyebrow)'
  : voice === 'vorsorge'   ? 'var(--accent-vorsorge-ink)'
  :                          'var(--brand-accent)';
  const subColor = onDark ? 'var(--mode-traue-island-muted)' : 'var(--ink-500)';
  const titleColor = onDark ? 'var(--mode-traue-island-fg)' : 'var(--ink-900)';
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '44px 1fr auto',
      gap: 16, alignItems: 'center',
      padding: '18px 0',
      borderTop: `1px solid ${onDark ? 'rgba(255,255,255,.08)' : 'var(--line)'}`,
    }}>
      <div style={{
        width: 40, height: 40, borderRadius: '50%',
        background: onDark ? 'rgba(232,146,128,.18)' : 'var(--brand-accent-soft)',
        color: accent,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>{icon}</div>
      <div>
        <div style={{ font: '500 13px/1.2 var(--f-body)', color: titleColor }}>{title}</div>
        <div style={{ marginTop: 4, font: '300 14px/1.4 var(--f-body)', color: subColor }}>{value}</div>
      </div>
      {action && (
        <a href="#" style={{
          font: '600 10px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)',
          textTransform: 'uppercase', color: accent,
          textDecoration: 'none', paddingBottom: 4, borderBottom: `1px solid ${accent}`,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>{action}<ArrowRight size={10} color={accent}/></a>
      )}
    </div>
  );
}

function KontaktInseln() {
  return (
    <div>
      {/* — Hero — */}
      <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',
          }}>
            Wir sind <em style={{ fontStyle: 'normal', fontFamily: 'var(--f-display)', fontWeight: 400, color: 'var(--brand-accent)', fontSize: 40 }}>für Sie da.</em>
          </h1>
          <p style={{
            margin: 0, maxWidth: '54ch',
            color: 'var(--ink-700)', fontSize: 16, lineHeight: 1.7,
          }}>
            Was uns geschickt hat, ist verschieden. Bitte wählen Sie den Weg, der Ihrer Situation entspricht.
          </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 Voice-Inseln — */}
      <section style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
        borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)',
      }}>
        {/* Trauerfall — warme Stimme, dunkler Hintergrund */}
        <article style={{
          background: 'var(--mode-traue-portal-bg)',
          color: 'var(--mode-traue-island-fg)',
          padding: '64px 56px',
          position: 'relative', overflow: 'hidden',
        }}>
          <ModusEyebrow tone="trauerfall" onDark/>
          <h2 style={{
            margin: '18px 0 14px',
            fontFamily: 'var(--f-body)', fontWeight: 300,
            fontSize: 38, lineHeight: 1.15, letterSpacing: '-.01em',
            color: 'var(--mode-traue-island-fg)', maxWidth: '18ch',
          }}>
            Es ist <em style={{ fontStyle: 'normal', fontFamily: 'var(--f-display)', fontWeight: 300, color: 'var(--mode-traue-island-eyebrow)', fontSize: 42 }}>passiert.</em><br/>
            Wir sind jetzt für Sie da.
          </h2>
          <p style={{ margin: 0, color: 'var(--mode-traue-island-muted)', maxWidth: '36ch', fontSize: 15, lineHeight: 1.75 }}>
            Rufen Sie an, zu jeder Zeit. Wir besprechen in Ruhe die Situation und nehmen Ihnen die ersten Sorgen ab.
          </p>

          <a href="tel:053614222" style={{
            marginTop: 26, display: 'inline-flex', alignItems: 'center', gap: 16,
            padding: '18px 32px 18px 22px',
            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)',
            width: 'fit-content',
          }}>
            <span style={{
              width: 40, height: 40, 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 26px/1 var(--f-body)', letterSpacing: '.01em' }}>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: 6 }}>Tag &amp; Nacht erreichbar</span>
            </span>
          </a>

          <div style={{ marginTop: 32 }}>
            <ChannelRow voice="trauerfall" onDark
              icon={<WhatsAppIcon size={18}/>}
              title="WhatsApp"
              value="Wenn Reden zu viel ist — schreiben Sie uns."
              action="Schreiben"/>
            <ChannelRow voice="trauerfall" onDark
              icon={<PinIcon size={18}/>}
              title="Persönlich vor Ort"
              value="Kurt-Schumacher-Ring 256 · Wolfsburg"
              action="Adresse"/>
          </div>
        </article>

        {/* Vorsorge — sachliche Stimme, helle Bühne */}
        <article style={{
          background: 'var(--mode-vor-stage-bg)',
          padding: '64px 56px',
          position: 'relative', overflow: 'hidden',
        }}>
          <ModusEyebrow tone="vorsorge"/>
          <h2 style={{
            margin: '18px 0 14px',
            fontFamily: 'var(--f-body)', fontWeight: 300,
            fontSize: 38, lineHeight: 1.15, letterSpacing: '-.01em',
            color: 'var(--ink-900)', maxWidth: '20ch',
          }}>
            Termin vereinbaren, <em style={{ fontStyle: 'normal', fontFamily: 'var(--f-display)', fontWeight: 400, color: 'var(--mode-vor-accent-ink)', fontSize: 42 }}>in Ruhe.</em>
          </h2>
          <p style={{ margin: 0, color: 'var(--ink-500)', maxWidth: '36ch', fontSize: 15, lineHeight: 1.75 }}>
            Für ein Vorgespräch zur Bestattungsvorsorge. Wir nehmen uns Zeit, hören zu und halten die Wünsche schriftlich fest.
          </p>

          <div style={{ display: 'flex', gap: 12, marginTop: 26, flexWrap: 'wrap' }}>
            <a href="#" style={{
              display: 'inline-flex', alignItems: 'center', gap: 12,
              padding: '14px 26px 14px 18px',
              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: 30, height: 30, borderRadius: '50%',
                background: 'rgba(255,255,255,.18)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
              }}>
                <CalendarIcon size={15} color="#fff"/>
              </span>
              <span>
                <span style={{ display: 'block', font: '500 12px/1 var(--f-body)', letterSpacing: 'var(--ls-caps-md)', textTransform: 'uppercase' }}>Termin vereinbaren</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: 4 }}>unverbindlich</span>
              </span>
            </a>
          </div>

          <div style={{ marginTop: 32 }}>
            <ChannelRow voice="vorsorge"
              icon={<PhoneIcon size={18}/>}
              title="Telefon · Geschäftszeiten"
              value="Mo–Fr · 9–17 Uhr · 05361 · 4 22 22"
              action="Anrufen"/>
            <ChannelRow voice="vorsorge"
              icon={<MailIcon size={18}/>}
              title="E-Mail"
              value="kontakt@tschense-bestattungen.de"
              action="Schreiben"/>
            <ChannelRow voice="vorsorge"
              icon={<ClockIcon size={18}/>}
              title="Rückruf anfragen"
              value="Wir melden uns binnen zwei Werktagen."
              action="Wunschzeit"/>
          </div>
        </article>
      </section>

      {/* — Formular + Adresse/Karte — */}
      <section style={{ padding:'96px var(--page-x)', background: 'var(--surface)' }}>
        <div style={{
          maxWidth: 1140, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 56,
        }}>
          {/* Formular */}
          <div>
            <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:24, height:1, background:'var(--brand-accent)'}}/>
              Schreiben Sie uns
            </span>
            <h2 style={{
              margin: '14px 0 8px',
              fontFamily: 'var(--f-display)', fontWeight: 300,
              fontSize: 36, lineHeight: 1.15, letterSpacing: '-.01em',
              color: 'var(--ink-900)',
            }}>
              Lieber schriftlich? — <em style={{ fontStyle: 'normal', fontWeight: 400, color: 'var(--brand-accent)' }}>gerne.</em>
            </h2>
            <p style={{ margin: '12px 0 32px', color: 'var(--ink-500)', fontSize: 15, lineHeight: 1.7, maxWidth: '50ch' }}>
              Wir lesen jede Nachricht persönlich und melden uns innerhalb eines Werktags zurück.
            </p>

            <form style={{ display: 'flex', flexDirection: 'column', gap: 24 }} onSubmit={e => e.preventDefault()}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
                <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="Wir möchten ein Vorgespräch vereinbaren …"/>

              <label style={{ display:'flex', gap:14, alignItems:'flex-start', fontSize:12.5, color:'var(--ink-500)', lineHeight:1.55, 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: 28 }}>
            <div style={{
              background: 'var(--surface-warm)',
              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: 'center' }}>
                  <PhoneIcon size={16} color="var(--brand-accent)"/>
                  <div style={{ color: 'var(--ink-700)', fontSize: 15, fontVariantNumeric: 'tabular-nums' }}>05361 · 4 22 22</div>
                </div>
                <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  <MailIcon size={16} color="var(--brand-accent)"/>
                  <div style={{ color: 'var(--ink-700)', fontSize: 15 }}>kontakt@tschense-bestattungen.de</div>
                </div>
                <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', borderTop: '1px solid var(--line)', paddingTop: 14, marginTop: 6 }}>
                  <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={{
              height: 280, 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)' }}
                loading="lazy" referrerPolicy="no-referrer-when-downgrade"/>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { KontaktInseln, ChannelRow });