// community.jsx
function Community() {
  return (
    <section className="community" id="community" data-screen-label="Community">
      <div className="wrap">
        <div className="community-grid">
          <div>
            <Eyebrow>Community + Blueprint</Eyebrow>
            <h2 style={{ marginTop: 14 }}>
              470+ Gründer.<br/>
              Ein <span className="accent">Blueprint</span>.<br/>
              Dein unfairer Vorteil.
            </h2>
            <p className="lead">
              Du bekommst zu jeder LLC-Gründung und zum ITIN Service kostenlosen Zugang zum <strong style={{ color: 'var(--ink)' }}>Business Funding Blueprint</strong> und unserer privaten Community — dem Ort, wo echte Gründer sich gegenseitig Banking-Tricks, Stripe-Hacks und Funding-Strategien weitergeben.
            </p>

            <div className="stats-row">
              <div className="stat">
                <div className="n">470<span className="suffix">+</span></div>
                <div className="l">Aktive Member</div>
              </div>
              <div className="stat">
                <div className="n">1.400<span className="suffix">+</span></div>
                <div className="l">LLCs im Netzwerk</div>
              </div>
              <div className="stat">
                <div className="n">24/7</div>
                <div className="l">Peer-Support</div>
              </div>
            </div>

            <div className="community-checklist">
              <div className="ci"><span className="check c"></span><span>Business Funding Blueprint — Schritt für Schritt zu US-Kreditkarten & Credit Lines</span></div>
              <div className="ci"><span className="check c"></span><span>Wöchentliche Live-Calls mit unseren OPM-Mentoren</span></div>
              <div className="ci"><span className="check c"></span><span>Templates: Stripe Appeal, Banking-Anträge, Tax-Zeug</span></div>
              <div className="ci"><span className="check c"></span><span>Direkter Zugang zu 1:1 Beratungen im OPM-Bereich</span></div>
            </div>

            <div style={{ display: 'flex', gap: 12, marginTop: 28 }}>
              <a href="#llc" className="btn btn-primary">LLC buchen & beitreten <Arrow /></a>
              <a href="#itin" className="btn btn-ghost">ITIN & Community</a>
            </div>
          </div>

          <div className="community-visual">
            <div className="community-badge">
              <span className="live-dot"></span>
              <span>Live · 47 online gerade</span>
            </div>

            <div className="chat-bubble b1">
              <div className="who">
                <span className="av" style={{ background: '#c084fc' }}>MK</span>
                <span>Marcus K.</span>
                <span className="time">09:12</span>
              </div>
              <div className="msg"><strong>Mercury Account approved</strong> in 4 Tagen mit eurer Template! Danke @team 🙌</div>
            </div>

            <div className="chat-bubble b2">
              <div className="who">
                <span className="av" style={{ background: 'var(--accent)', color: 'var(--accent-ink)' }}>TS</span>
                <span>Tamara S.</span>
                <span className="time">12:40</span>
              </div>
              <div className="msg">ITIN ist da! <strong>8 Wochen</strong>, kein Ablehnungsbrief. Jetzt Amex US-Application.</div>
            </div>

            <div className="chat-bubble b3">
              <div className="who">
                <span className="av" style={{ background: '#60a5fa' }}>DH</span>
                <span>David H.</span>
                <span className="time">gestern</span>
              </div>
              <div className="msg">Wer hat Erfahrung mit <strong>Chase Ink Business</strong>? Credit Score Boost nach 6 Monaten?</div>
            </div>

            <div className="chat-bubble b4">
              <div className="who">
                <span className="av" style={{ background: '#f97316' }}>LB</span>
                <span>Lisa B.</span>
                <span className="time">gestern</span>
              </div>
              <div className="msg">Reminder: <strong>Live-Call morgen 18:00</strong> — Thema OPM-Skalierung ab 10k MRR.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Community = Community;