function Dashboard() {
  const dashPhoto =
    "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?auto=format&fit=crop&w=900&q=80";
  const av1 = "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=80&q=80";
  const av2 = "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=80&q=80";

  return (
    <section className="dashboard" data-screen-label="03 Dashboard">
      <div className="container">
        <div className="dash-grid">
          <div className="dash-visual reveal">
            <div className="dash-blob"></div>
            <div className="dash-photo" style={{ backgroundImage: `url(${dashPhoto})` }}></div>
            <div className="heart-pill"><Icon.Heart /></div>
            <div className="dash-orange-dot"></div>

            <div className="stats-card">
              <h4>Statistiques annuelles</h4>
              <div className="stats-row">
                <div className="av" style={{ backgroundImage: `url(${av1})` }}></div>
                <div className="stats-pair">
                  <span>Revenus</span>
                  <b className="down">$25.04 ↓</b>
                </div>
                <div className="av" style={{ backgroundImage: `url(${av2})` }}></div>
                <div className="stats-pair">
                  <span>Conversions</span>
                  <b className="up">$50.91 ↑</b>
                </div>
              </div>
              <div className="stats-bot">
                <div className="stats-mini"><span>63%</span></div>
                <div className="right">
                  <span>Vitesse de chargement</span>
                  <b>1.49s</b>
                </div>
                <div style={{ color: "#FFC542", fontSize: 22 }}>↗</div>
              </div>
            </div>
          </div>

          <div className="dash-text reveal delay-1">
            <h2>Pilote toutes tes données depuis<br />un tableau de bord unifié</h2>
            <p className="lead">
              Notre plateforme centralise tes métriques, tes clients et tes performances en temps réel.
              Une interface claire, des insights actionnables, zéro friction.
            </p>
            <div className="bullets">
              <div className="bullet">
                <span className="check"><Icon.Check /></span>
                <div>
                  <h4>Interface bien <span className="u">organisée</span></h4>
                  <p>Une UX pensée pour la productivité, sans surcharge cognitive ni clics inutiles.</p>
                </div>
              </div>
              <div className="bullet">
                <span className="check"><Icon.Check /></span>
                <div>
                  <h4>Sans bug, garanti <span className="new-badge">Nouveau</span></h4>
                  <p>Code testé, monitoré et documenté. Notre engagement : zéro régression en production.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Dashboard = Dashboard;