/* Impressum — gemäß § 5 DDG. */

const ImpressumPage = ({ onNavigate }) => {
  const { isMobile } = useBreakpoint();
  const cols = isMobile ? '1fr' : '220px 1fr';
  return (
  <div className="page-fade-in">
    <Section background="cream" padding="large">
      <PageHeader
        eyebrow="Rechtliches"
        title="Impressum."
        lede="Angaben gemäß § 5 Digitale-Dienste-Gesetz (DDG)."
      />
    </Section>

    <Section background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: isMobile ? 12 : 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Diensteanbieterin</SectionEyebrow>
        <div style={{ maxWidth: 720, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-1)' }}>
          <div style={{ fontWeight: 700, fontSize: 19, marginBottom: 6 }}>Maike Lammert</div>
          <div style={{ color: 'var(--fg-2)' }}>Lehrkraft für besondere Aufgaben · Doktorandin</div>
          <div style={{ marginTop: 14, color: 'var(--fg-2)' }}>
            Hochschule Bielefeld (HSBI) · Fachbereich Gesundheit<br/>
            Interaktion 1<br/>
            33619 Bielefeld
          </div>
        </div>
      </div>
    </Section>

    <Section background="cream" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: isMobile ? 12 : 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Kontakt</SectionEyebrow>
        <Card style={{ padding: 28, maxWidth: 540 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <EmojiContact kind="mail" href="mailto:info@frühchen-studie.de">info@frühchen-studie.de</EmojiContact>
            <EmojiContact kind="instagram" href="https://www.instagram.com/fruehchen_studie/" target="_blank" rel="noopener noreferrer">@fruehchen_studie</EmojiContact>
          </div>
        </Card>
      </div>
    </Section>

    <Section background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: isMobile ? 12 : 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Verantwortlich i.&nbsp;S.&nbsp;d. § 18 Abs. 2 MStV</SectionEyebrow>
        <div style={{ maxWidth: 720, fontSize: 17, lineHeight: 1.7, color: 'var(--fg-1)' }}>
          Maike Lammert · Anschrift wie oben.
        </div>
      </div>
    </Section>

    <Section background="cream" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: isMobile ? 12 : 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Haftung für Inhalte</SectionEyebrow>
        <div style={{ maxWidth: 760, fontSize: 16, lineHeight: 1.7, color: 'var(--fg-2)', textWrap: 'pretty' }}>
          <p style={{ marginBottom: 14 }}>
            Die Inhalte dieser Seite werden mit größter Sorgfalt erstellt. Für
            die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann
            jedoch keine Gewähr übernommen werden.
          </p>
          <p style={{ margin: 0 }}>
            Als Diensteanbieterin bin ich gemäß § 7 Abs. 1 DDG für eigene
            Inhalte auf diesen Seiten nach den allgemeinen Gesetzen
            verantwortlich. Nach §§ 8 bis 10 DDG bin ich als Diensteanbieterin
            jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde
            Informationen zu überwachen oder nach Umständen zu forschen, die
            auf eine rechtswidrige Tätigkeit hinweisen.
          </p>
        </div>
      </div>
    </Section>

    <Section background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: isMobile ? 12 : 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Haftung für Links</SectionEyebrow>
        <div style={{ maxWidth: 760, fontSize: 16, lineHeight: 1.7, color: 'var(--fg-2)', textWrap: 'pretty' }}>
          Diese Webseite enthält Verweise zu externen Webseiten Dritter, auf
          deren Inhalte ich keinen Einfluss habe. Für die Inhalte der verlinkten
          Seiten ist stets die jeweilige Anbieterin oder der Betreiber der
          Seiten verantwortlich. Zum Zeitpunkt der Verlinkung waren keine
          Rechtsverstöße erkennbar.
        </div>
      </div>
    </Section>

    <Section background="cream" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: isMobile ? 12 : 56, alignItems: 'flex-start' }}>
        <SectionEyebrow>Urheberrecht</SectionEyebrow>
        <div style={{ maxWidth: 760, fontSize: 16, lineHeight: 1.7, color: 'var(--fg-2)', textWrap: 'pretty' }}>
          Die auf dieser Seite veröffentlichten Inhalte und Werke unterliegen
          dem deutschen Urheberrecht. Vervielfältigung, Bearbeitung,
          Verbreitung und jede Art der Verwertung außerhalb der Grenzen des
          Urheberrechts bedürfen der schriftlichen Zustimmung der jeweiligen
          Urheberin. Logos der genannten Hochschulen werden mit deren
          freundlicher Erlaubnis verwendet.
        </div>
      </div>
    </Section>

    <Section background="warm" padding="md">
      <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <div>
          <SectionEyebrow>Weitere rechtliche Hinweise</SectionEyebrow>
          <h3 style={{ marginTop: 8, fontSize: 22, fontWeight: 700, letterSpacing: '-0.005em' }}>
            Datenschutz­hinweise lesen
          </h3>
        </div>
        <Button variant="primary" icon="arrow" onClick={() => onNavigate('privacy')}>
          Zu den Datenschutz­hinweisen
        </Button>
      </div>
    </Section>


  </div>
  );
};

Object.assign(window, { ImpressumPage });