/* DualHero — split landing screen that weights mothers and professionals
   equally. Both halves are full-bleed panels with their own eyebrow,
   headline, lede and two CTAs. The brand mark sits in the middle as a
   visual seam between the two audiences. */

const DualHero = ({ onJoin, onLearnMothers, onLearnProfs, onMaterials, tweaks = {} }) => {
  const { isMobile, isTablet } = useBreakpoint();
  const accent = tweaks.heroAccent || 'coral';
  const accentColor =
    accent === 'cyan' ? 'var(--brand-cyan-400)' :
    accent === 'white' ? '#fff' :
    'var(--brand-coral-500)';

  return (
    <section style={{
      background: 'var(--brand-blue-700)',
      color: '#fff',
      position: 'relative',
      overflow: 'hidden',
      borderBottom: '1px solid rgba(255,255,255,0.10)'
    }}>
      {/* shared eyebrow band */}
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        padding: isMobile ? '28px 16px 0' : '40px 28px 0',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18,
        flexWrap: 'wrap'
      }}>
        <SectionEyebrow tone="cyan" style={{ color: 'var(--brand-cyan-400)', textAlign: 'center' }}>
          Eine qualitative Studie · Suche nach Teilnehmer*innen
        </SectionEyebrow>
        {!isMobile && <span style={{ width: 6, height: 6, background: 'rgba(255,255,255,0.30)', borderRadius: 999 }} />}
        {!isMobile && <span style={{ fontSize: 13, fontWeight: 500, color: 'rgba(255,255,255,0.72)' }}>
          Doktorarbeit · HSBI · Universität zu Köln
        </span>}
      </div>

      {/* central headline */}
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        padding: isMobile ? '16px 16px 8px' : '20px 28px 8px',
        textAlign: 'center'
      }}>
        <h1 style={{
          fontWeight: 800,
          fontSize: isMobile ? 36 : isTablet ? 52 : 76,
          lineHeight: isMobile ? 1.1 : 0.98,
          letterSpacing: '-0.025em',
          textWrap: 'balance',
          margin: '12px auto 10px',
          maxWidth: 1080
        }}>
          Frühchen-Mama oder haben Sie Kontakt zu einer?<br />
          <span style={{ color: accentColor, transition: 'color 200ms' }}>Unterstützen Sie mich bei meiner Studie.</span>
        </h1>
        <p style={{
          fontSize: isMobile ? 16 : 19, lineHeight: 1.55, fontWeight: 400,
          color: 'rgba(255,255,255,0.86)', maxWidth: 760, margin: '0 auto 12px',
          textWrap: 'pretty'
        }}>
          Für meine Doktorarbeit zur Hebammen­betreuung und Gesundheits­versorgung
          nach einer Frühgeburt suche ich betroffene Mütter* — und Fachpersonen,
          die helfen können, diese zu erreichen.
        </p>
      </div>

      {/* center logo medallion — hidden on mobile */}
      {!isMobile && (
        <div style={{
          maxWidth: 1280, margin: '0 auto', padding: '20px 28px 0',
          display: 'grid', placeItems: 'center',
        }}>
          <div aria-hidden style={{
            width: 96, height: 96, borderRadius: '50%',
            background: 'var(--brand-blue-700)',
            border: '1px solid rgba(255,255,255,0.22)',
            display: 'grid', placeItems: 'center',
            boxShadow: '0 12px 28px rgba(0,28,42,0.40)',
          }}>
            <img src={window.__resources.logoBaby} alt="" style={{ width: 72, height: 72 }} />
          </div>
        </div>
      )}

      {/* the two halves */}
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        padding: isMobile ? '16px 16px 56px' : '24px 28px 96px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 16 : 26,
        position: 'relative'
      }}>
        {/* divider strip — desktop only */}
        {!isMobile && (
          <div aria-hidden style={{
            position: 'absolute',
            left: '50%', top: 32, bottom: 32,
            width: 1, transform: 'translateX(-50%)',
            background: 'linear-gradient(180deg, transparent, rgba(255,255,255,0.20), transparent)'
          }} />
        )}

        <DualHeroPanel
          isMobile={isMobile}
          eyebrow="Für Mütter*"
          eyebrowTone="coral"
          title="Sind Sie betroffen?"
          desc="Ich suche Mütter*, die mit mir über ihre Erfahrungen sprechen möchten."
          pills={['Kind < 1.500 g', '6 Monate – 5 Jahre her', 'lebend']}
          primary={{ label: 'Kontaktdaten senden', onClick: onJoin }}
          secondary={{ label: 'Erst mehr erfahren', onClick: onLearnMothers }} />

        <DualHeroPanel
          isMobile={isMobile}
          eyebrow="Für Fachpersonen"
          eyebrowTone="cyan"
          title="Stehen Sie in Kontakt mit betroffenen Personen?"
          desc="Sie arbeiten oder engagieren sich im Gesundheits- oder Sozialwesen? Helfen Sie mir, Mütter* zu erreichen."
          pills={['Hebammen', 'Frühe Hilfen', 'Bunter Kreis', 'Ärzt*innen', 'Frühförderung', 'Selbsthilfe', 'Weitere']}
          primary={{ label: 'Materialien herunterladen', onClick: onMaterials }}
          secondary={{ label: 'So können Sie helfen', onClick: onLearnProfs }} />
      </div>
    </section>
  );
};

const DualHeroPanel = ({ eyebrow, eyebrowTone, title, desc, pills, primary, secondary, isMobile }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: hover ? 'rgba(255,255,255,0.10)' : 'rgba(255,255,255,0.06)',
        border: '1px solid rgba(255,255,255,0.18)',
        borderRadius: 24,
        padding: isMobile ? '24px 20px 20px' : '36px 36px 32px',
        display: 'flex', flexDirection: 'column', gap: 14,
        transition: 'background 200ms cubic-bezier(.2,.7,.2,1)',
        minHeight: isMobile ? 'auto' : 360,
      }}>
      <SectionEyebrow tone={eyebrowTone}
        style={{ color: eyebrowTone === 'cyan' ? 'var(--brand-cyan-400)' : 'var(--brand-coral-500)' }}>
        {eyebrow}
      </SectionEyebrow>
      <h2 style={{
        margin: 0,
        fontSize: isMobile ? 28 : 44,
        fontWeight: 800,
        lineHeight: 1.05, letterSpacing: '-0.02em',
        color: '#fff', textWrap: 'balance'
      }}>{title}</h2>
      <p style={{
        margin: 0,
        fontSize: isMobile ? 15 : 18,
        lineHeight: 1.55,
        color: 'rgba(255,255,255,0.86)', textWrap: 'pretty',
        maxWidth: 460
      }}>{desc}</p>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 4 }}>
        {pills.map((p) => <Pill key={p} tone="invOutline">{p}</Pill>)}
      </div>
      <div style={{ marginTop: 'auto', display: 'flex', gap: 12, flexWrap: 'wrap', paddingTop: 14 }}>
        <Button variant="primary" icon="arrow" onClick={primary.onClick}>{primary.label}</Button>
        <Button variant="inverseOutline" onClick={secondary.onClick}>{secondary.label}</Button>
      </div>
    </div>
  );
};

Object.assign(window, { DualHero });