/* Materialien zum Runterladen und Teilen */

const MaterialsPage = ({ onNavigate }) => {
  const { isMobile, isTablet } = useBreakpoint();
  return (
  <div className="page-fade-in">
    <Section background="cream" padding="large">
      <PageHeader
        eyebrow="Materialien"
        title="Zum Herunter­laden und Teilen."
        lede="Handzettel, Poster und Instagram-Vorlagen — zum Auslegen in der Praxis, zum Weitergeben in der Beratung oder zum Teilen in sozialen Netzwerken. Druckfertig und in passenden Formaten."
      />
    </Section>

    <Section background="white" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 22, marginBottom: 36 }}>
        <MaterialCard
          eyebrow="Handzettel" title="A5 Flyer"
          desc="Zum Auslegen oder Mitgeben — kompaktes Format mit allen wichtigen Infos und QR-Code."
          format="PDF · A5 · 2-seitig"
          previewSrc={window.__resources.previewFlyer}
          previewAlt="Vorschau A5 Flyer"
          downloadHref="downloads/fruehchen-studie-flyer-a5.pdf"
          downloadName="Frühchen-Studie_Flyer_A5.pdf"
        />
        <MaterialCard
          eyebrow="Poster" title="A4 Poster"
          desc="Für Aushang in Praxen, Wartezimmern, Geburtskliniken und Familien­zentren."
          format="PDF · A4 · 1-seitig"
          previewSrc={window.__resources.previewPoster}
          previewAlt="Vorschau A4 Poster"
          downloadHref="downloads/fruehchen-studie-poster-a4.pdf"
          downloadName="Frühchen-Studie_Poster_A4.pdf"
        />
        <MaterialCard
          eyebrow="Instagram" title="Feed-Post"
          desc="Quadratisches Format (1:1) zum Teilen im eigenen Instagram-Feed."
          format="PNG · 1080 × 1080 · 2 Vorlagen"
          previewAspect="square"
          previewSrc={window.__resources.instaPost1}
          previewAlt="Vorschau Instagram Feed-Post"
          downloadHref="downloads/Frühchen-Studie_de-Instagram-Post.zip"
          downloadName="Frühchen-Studie_Instagram-Post.zip"
          galleryImages={[
            { src: window.__resources.instaPost1, alt: 'Feed-Post Vorlage 1' },
            { src: window.__resources.instaPost2, alt: 'Feed-Post Vorlage 2' },
          ]}
        />
        <MaterialCard
          eyebrow="Instagram" title="Story"
          desc="Hochformat (9:16) für Instagram Stories."
          format="PNG · 1080 × 1920 · 4 Vorlagen"
          previewSrc={window.__resources.instaStory1}
          previewAlt="Vorschau Instagram Story"
          downloadHref="downloads/Frühchen-Studie_de-Instagram-Story.zip"
          downloadName="Frühchen-Studie_Instagram-Story.zip"
          galleryImages={[
            { src: window.__resources.instaStory1, alt: 'Story Vorlage 1' },
            { src: window.__resources.instaStory2, alt: 'Story Vorlage 2' },
            { src: window.__resources.instaStory3, alt: 'Story Vorlage 3' },
            { src: window.__resources.instaStory4, alt: 'Story Vorlage 4' },
          ]}
        />
      </div>
    </Section>

    {/* Direct links to QR codes */}
    <Section background="cream" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 24, maxWidth: 720 }}>
        <QrCard
          title="QR zum Kontaktformular"
          desc="Direkt zur Kontaktdaten-Erfassung für Studieninteressierte."
          qr={window.__resources.qrKontakt}
          href="https://dvz-survey.hsbi.de/index.php/895629?lang=de"
          target="dvz-survey.hsbi.de"
          useModal={true}
        />
        <QrCard
          title="QR zum Instagram-Profil"
          desc="Nutzen Sie auch gerne mein Instagram-Profil, um über Ihren eigenen Social-Media-Account auf meine Studie aufmerksam zu machen."
          qr={window.__resources.qrInsta}
          href="https://www.instagram.com/fruehchen_studie"
          target="@fruehchen_studie"
          useModal={false}
        />
      </div>
    </Section>

    {/* Sharing tips */}
    <Section background="warm" padding="md">
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.6fr', gap: isMobile ? 24 : 56, alignItems: 'flex-start' }}>
        <div>
          <SectionEyebrow>So können Sie helfen</SectionEyebrow>
          <h2 style={{ marginTop: 12, fontSize: 36, fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.015em' }}>
            Drei einfache Wege, die Materialien einzusetzen.
          </h2>
        </div>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 18, fontSize: 17, lineHeight: 1.6, color: 'var(--fg-1)' }}>
          <Bullet tone="cyan">
            <strong>Aushängen oder auslegen</strong> — Geburtsklinik, Frauenarzt­praxis,
            Familien­zentrum, Frühförderstelle, Selbsthilfe oder andere Einrichtungen.
          </Bullet>
          <Bullet tone="cyan">
            <strong>Persönlich weitergeben</strong> — wenn Sie in der Beratung oder
            Nachsorge Kontakt zu Müttern* haben, deren Kind sehr früh oder klein zur Welt
            kam.
          </Bullet>
          <Bullet tone="cyan">
            <strong>Online teilen</strong> — in den eigenen Kanälen, in E-Mail-Verteilern
            von Berufs­verbänden, in Eltern- und Selbsthilfe­netzwerken.
          </Bullet>
        </ul>
      </div>
    </Section>


  </div>
  );
};

const MaterialCard = ({ eyebrow, title, desc, format, previewSrc, previewAlt, downloadHref, downloadName, galleryImages, previewAspect }) => {
  const [hover, setHover] = React.useState(false);
  const [lightboxIndex, setLightboxIndex] = React.useState(null);
  const { isMobile } = useBreakpoint();

  const isGallery = galleryImages && galleryImages.length > 1;
  const lightboxImages = isGallery ? galleryImages : (previewSrc ? [{ src: previewSrc, alt: previewAlt }] : []);
  const hasPreview = lightboxImages.length > 0;

  return (
    <>
      {lightboxIndex !== null && (
        <ImageLightbox
          images={lightboxImages}
          index={lightboxIndex}
          onNavigate={isGallery ? setLightboxIndex : undefined}
          onClose={() => setLightboxIndex(null)}
        />
      )}
      <div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          background: '#fff', border: '1px solid var(--border-soft)',
          borderRadius: 24, padding: 22, display: 'flex', flexDirection: 'column', gap: 16,
          boxShadow: hover ? '0 14px 28px rgba(14,42,56,0.12)' : '0 2px 6px rgba(14,42,56,0.05)',
          transform: hover ? 'translateY(-3px)' : 'translateY(0)',
          transition: 'all 180ms cubic-bezier(.2,.7,.2,1)',
        }}
      >
        {/* Wrapper: always 280px on desktop so text aligns across all cards */}
        <div style={{ height: isMobile ? 'auto' : 280, flexShrink: 0 }}>
          <div
            onClick={() => hasPreview && setLightboxIndex(0)}
            style={{
              background: 'var(--cream)', borderRadius: 16,
              border: '1px solid var(--border-soft)',
              overflow: 'hidden',
              cursor: hasPreview ? 'zoom-in' : 'default',
              position: 'relative',
              // Square: aspect-ratio (shorter than wrapper on desktop — gap below is card bg)
              // Portrait: fill wrapper entirely
              ...(previewAspect === 'square'
                ? { aspectRatio: '1/1', maxHeight: isMobile ? 'none' : 280 }
                : { height: isMobile ? 280 : '100%' }),
            }}
          >
            {previewSrc ? (
              <img src={previewSrc} alt={previewAlt || title}
                style={{
                  position: 'absolute', inset: 0,
                  width: '100%', height: '100%', borderRadius: 12,
                  objectFit: 'cover',
                  objectPosition: 'top',
                }} />
            ) : (
              <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: 'var(--fg-3)', fontSize: 13 }}>Vorschau nicht verfügbar</div>
            )}
            {hasPreview && hover && (
              <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,28,42,0.25)', display: 'grid', placeItems: 'center', borderRadius: 12 }}>
                <span style={{ color: '#fff', fontSize: 13, fontWeight: 600, background: 'rgba(0,0,0,0.45)', padding: '6px 14px', borderRadius: 999 }}>
                  {isGallery ? `${lightboxImages.length} Vorlagen ansehen` : 'Vergrößern'}
                </span>
              </div>
            )}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
          <SectionEyebrow>{eyebrow}</SectionEyebrow>
          <h3 style={{ marginTop: 8, fontSize: 22, fontWeight: 700, letterSpacing: '-0.005em' }}>{title}</h3>
          <p style={{ marginTop: 8, fontSize: 15, lineHeight: 1.6, color: 'var(--fg-2)', margin: '8px 0 0', textWrap: 'pretty', flex: 1 }}>{desc}</p>
          <div style={{ marginTop: 14, fontSize: 12, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>{format}</div>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 'auto', flexWrap: 'wrap' }}>
          <a href={downloadHref} download={downloadName} style={{ textDecoration: 'none' }}>
            <Button variant="primary" icon="download">Herunterladen</Button>
          </a>
          {hasPreview && (
            <Button variant="ghost" onClick={() => setLightboxIndex(0)}>Vorschau</Button>
          )}
        </div>
      </div>
    </>
  );
};


const QrCard = ({ title, desc, qr, target, href, useModal = false }) => {
  const handleClick = (e) => {
    if (useModal) {
      e.preventDefault();
      window.requestContactRedirect && window.requestContactRedirect();
    }
  };

  return (
    <Card style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center', textAlign: 'center' }}>
      <a
        href={href}
        onClick={handleClick}
        target={useModal ? undefined : '_blank'}
        rel={useModal ? undefined : 'noopener noreferrer'}
        style={{ cursor: 'pointer' }}
      >
        <img src={qr} alt={title} style={{ width: 160, height: 160, borderRadius: 10 }} />
      </a>
      <div>
        <SectionEyebrow>QR-Code</SectionEyebrow>
        <h3 style={{ marginTop: 8, marginBottom: 6, fontSize: 18, fontWeight: 700, letterSpacing: '-0.005em' }}>{title}</h3>
        <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0, textWrap: 'pretty' }}>{desc}</p>
        <div style={{ marginTop: 10, fontSize: 12, color: 'var(--brand-blue-700)', fontWeight: 600 }}>{target}</div>
      </div>
    </Card>
  );
};

Object.assign(window, { MaterialsPage });