/* Hero — deep-blue panel with the brand mark on the right. */

const Hero = ({ onJoin, onLearn, 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)';
  const showRings = tweaks.heroLogoRings !== false;

  return (
    <section style={{
      background: 'var(--brand-blue-700)',
      color: '#fff',
      padding: isMobile ? '64px 0 72px' : '108px 0 120px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* faint accent shapes */}
      <div aria-hidden style={{
        position: 'absolute', right: -160, top: -120,
        width: 540, height: 540, borderRadius: '50%',
        background: 'rgba(0, 172, 212, 0.10)',
      }}/>
      <div aria-hidden style={{
        position: 'absolute', left: -100, bottom: -160,
        width: 360, height: 360, borderRadius: '50%',
        background: 'rgba(241, 95, 87, 0.08)',
      }}/>

      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 16px',
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.45fr 1fr',
        gap: isMobile ? 32 : 64,
        alignItems: 'center',
        position: 'relative',
      }}>
        <div>
          <SectionEyebrow tone="cyan">Eine qualitative Studie · Suche nach Teilnehmer*innen</SectionEyebrow>
          <h1 style={{
            marginTop: 18, marginBottom: 18,
            fontWeight: 800,
            fontSize: isMobile ? 48 : isTablet ? 68 : 92,
            lineHeight: 0.96,
            letterSpacing: '-0.025em',
            textWrap: 'balance',
          }}>Frühchen-Mama?<br/>
            <span style={{ color: accentColor, transition: 'color 200ms' }}>Ihre Erfahrung zählt.</span>
          </h1>
          <p style={{
            fontSize: isMobile ? 18 : 24,
            lineHeight: 1.4, fontWeight: 400,
            color: 'rgba(255,255,255,0.92)', maxWidth: 620, marginBottom: 36,
            textWrap: 'pretty'
          }}>
            Ich bin Hebamme und schreibe eine Doktorarbeit zur Hebammen­betreuung
            nach einer Frühgeburt. Für die Studie suche ich Mütter*, die mit mir
            über ihre Erfahrungen sprechen möchten.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Button variant="primary" size="lg" icon="arrow" onClick={onJoin}>
              Kontaktdaten senden
            </Button>
            <Button variant="inverseOutline" size="lg" onClick={onLearn}>
              Erst mehr erfahren
            </Button>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 40, flexWrap: 'wrap' }}>
            <Pill tone="invOutline">Kind &lt; 1.500 g geboren</Pill>
            <Pill tone="invOutline">Geburt 6 Monate – 5 Jahre her</Pill>
            <Pill tone="invOutline">Interview online oder persönlich</Pill>
          </div>
        </div>

        {!isMobile && (
          <div style={{ display: 'grid', placeItems: 'center', position: 'relative' }}>
            {showRings && <div style={{
              position: 'absolute',
              width: 420, height: 420, borderRadius: '50%',
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.16)',
            }}/>}
            {showRings && <div style={{
              position: 'absolute',
              width: 320, height: 320, borderRadius: '50%',
              background: 'rgba(255,255,255,0.06)',
              border: '1px solid rgba(255,255,255,0.20)',
            }}/>}
            <img src={window.__resources.logoBaby} alt="" style={{
              position: 'relative',
              width: 360, height: 360,
              filter: 'drop-shadow(0 24px 48px rgba(0,28,42,0.45))',
            }}/>
          </div>
        )}
      </div>
    </section>
  );
};

Object.assign(window, { Hero });