/* Audience deep-dive section.
   Top half:    Headline + lead (full width)
   Middle:      Composition bars (40% / 50% / 80%)  + sidebar (Geografie + Top-Arbeitgeber)
   Bottom:      Full-width reader voices grid (2x2 cards)
*/
function Audience() {
  return (
    <section style={{ padding: '120px 0', background: '#fff' }}>
      <div className="container">
        {/* Top — headline */}
        <div style={{ maxWidth: 880, marginBottom: 64 }}>
          <div className="section-eyebrow" style={{ marginBottom: 24 }}>
            <span className="kicker-line"></span>Audience-Komposition
          </div>
          <h2 className="section-title" style={{ fontSize: 'clamp(36px, 4.4vw, 56px)' }}>
            Wer mich liest, <em style={{ color: 'var(--ap-blue)', fontWeight: 500 }}>hört</em> und sieht.
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.55, color: 'var(--fg-2)', marginTop: 20, maxWidth: 720 }}>
            Reichweite ist nur die halbe Wahrheit. Die andere Hälfte ist die Zusammensetzung. Wenn 90.000+ Menschen mir folgen, ist die nächste Frage: sind das deine Entscheider?
          </p>
        </div>

        {/* Middle — composition bars + sidebar */}
        <div className="audience-grid" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            {[
            { pct: '40%+', label: 'Director, VP, C-Level oder Geschäftsführung', bar: 42 },
            { pct: '~50%', label: 'Direkt aus der Automobilindustrie (OEM und Zulieferer)', bar: 50 },
            { pct: '~80%', label: 'Im Automotive-Ökosystem inkl. Beratung, IT, Engineering, Handel', bar: 80 }].
            map((r, i) =>
            <div key={i}>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 'clamp(40px, 5vw, 64px)', fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.03em', lineHeight: 1 }}>{r.pct}</div>
                <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.5, color: 'var(--fg-2)', marginTop: 8, marginBottom: 12, maxWidth: 480 }}>{r.label}</div>
                <div style={{ height: 6, background: 'var(--bg-subtle)', borderRadius: 3, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: `${r.bar}%`, background: 'var(--ap-gradient)', borderRadius: 3 }}></div>
                </div>
              </div>
            )}
          </div>

          <aside style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            <div style={{ padding: '20px 24px', background: 'var(--bg-page)', borderRadius: 8, border: '1px solid var(--border-default)' }}>
              <div className="section-eyebrow" style={{ marginBottom: 6 }}>Geografischer Schwerpunkt</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.5 }}>
                München. Stuttgart. Berlin. Frankfurt. Wolfsburg.
              </div>
            </div>

            <div>
              <div className="section-eyebrow" style={{ marginBottom: 16 }}>Top-Arbeitgeber</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)', marginBottom: 12, lineHeight: 1.5 }}>
                Die fünf Unternehmen mit den meisten Lesern in meiner Audience.
              </div>
              <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 0, border: '1px solid var(--border-default)', borderRadius: 8, overflow: 'hidden' }}>
                {[
                ['01', 'Mercedes-Benz'],
                ['02', 'Bosch'],
                ['03', 'BMW'],
                ['04', 'CARIAD'],
                ['05', 'Volkswagen']].
                map(([rank, name], i) =>
                <li key={name} style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '14px 18px', background: '#fff', borderBottom: i < 4 ? '1px solid var(--border-default)' : 0 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-3)', minWidth: 20 }}>{rank}</span>
                    <span style={{ fontFamily: 'var(--font-serif)', fontSize: 18, fontWeight: 500, color: 'var(--fg-1)' }}>{name}</span>
                  </li>
                )}
              </ol>
            </div>
          </aside>
        </div>

        {/* Bottom — full-width reader voices */}
        <div style={{ marginTop: 96 }} data-comment-anchor="6196d0430c-div-73-9">
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 28, flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="section-eyebrow" style={{ marginBottom: 10 }}>
                <span className="kicker-line"></span>Was meine Leser sagen
              </div>
              <div style={{ fontFamily: 'var(--font-serif)', fontSize: 26, fontWeight: 500, color: 'var(--fg-1)', letterSpacing: '-0.02em', lineHeight: 1.25, maxWidth: 720 }}>
                Stimmen aus den Unternehmen, die du erreichen willst.
              </div>
            </div>
            <a href="https://shoutout.io/autopreneur/" target="_blank" rel="noopener" style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--ap-blue)', textDecoration: 'none', fontWeight: 500, whiteSpace: 'nowrap' }}>
              Alle Leser-Stimmen ↗
            </a>
          </div>
          <div className="reader-voices" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {[
            { q: 'Philipp kombiniert OEM-Insider-Wissen mit echter globaler Perspektive. Genau die Art von Intelligence, die Führungskräfte heute brauchen.', who: 'Mathias Vaitl', role: 'CEO · Mercedes-Benz Korea' },
            { q: 'Der Autopreneur ergänzt die deutsche Automobildiskussion um internationale Perspektiven. Genau die globale Sichtweise, die für eine erfolgreiche Transformation notwendig ist.', who: 'Dr. Stefan Baginski', role: 'VP Electrical Drive · BMW Group' },
            { q: 'Philipp reads automotive trends from a completely different angle. His content mix is perfectly balanced and sometimes provocative. Exactly what this industry needs to move forward.', who: 'Maria Grazia Davino', role: 'Regional Managing Director · BYD Europe' },
            { q: 'Die deutsche Automobilindustrie hat kein Erkenntnis-, sondern ein Umsetzungsproblem. Philipp Raasch bringt mit seiner Mischung aus „Insider-Sicht" und Makro-Perspektive die relevanten Themen auf den Punkt und ordnet die strukturellen Verschiebungen ein, statt sich in nostalgischen Rückblicken zu verlieren. Eine Perspektive, die ich regelmäßig schätze.', who: 'Frank Lindenberg', role: 'ehem. CFO · Mercedes-Benz AG' }].
            map((t, i) =>
            <article key={i} className="card" style={{ padding: 24, background: '#fff', display: 'flex', flexDirection: 'column', gap: 14 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="var(--ap-blue)" opacity="0.7" style={{ flexShrink: 0 }}><path d="M9 7H5a2 2 0 00-2 2v4a2 2 0 002 2h2v2a2 2 0 01-2 2H4v2h1a4 4 0 004-4V9zm12 0h-4a2 2 0 00-2 2v4a2 2 0 002 2h2v2a2 2 0 01-2 2h-1v2h1a4 4 0 004-4V9z" /></svg>
                <p style={{ fontFamily: 'var(--font-serif)', fontSize: 15, fontStyle: 'italic', color: 'var(--fg-1)', lineHeight: 1.5, margin: 0, flex: 1 }}>
                  {t.q}
                </p>
                <div style={{ paddingTop: 14, borderTop: '1px solid var(--border-default)' }}>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, color: 'var(--fg-1)' }}>{t.who}</div>
                  <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)', marginTop: 2 }}>{t.role}</div>
                </div>
              </article>
            )}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 1024px) {
          .reader-voices { grid-template-columns: repeat(2, 1fr) !important; }
        }
        @media (max-width: 860px) {
          .audience-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 560px) {
          .reader-voices { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>);

}
window.Audience = Audience;