function Hero() {
  // Placeholder photos via Unsplash
  const heroPhoto =
    "https://images.unsplash.com/photo-1531123897727-8f129e1688ce?auto=format&fit=crop&w=900&q=80";
  const avatar =
    "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80";
  const team = [
    "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=80&q=80",
    "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=80&q=80",
    "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=80&q=80",
  ];

  return (
    <section id="accueil" className="hero" data-screen-label="01 Hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text reveal in">
            <div className="eyebrow">Booste ta présence en ligne</div>
            <h1>
              Nous créons ton nouveau <br />
              site internet sur <span className="underline-word">mesure</span>
            </h1>
            <p className="lead">
              Nous concevons des sites web rapides, des shops en ligne élégantes et sur mesure.
              De la stratégie au déploiement, on construit l'écosystème digital de ton entreprise.
            </p>
            <div className="hero-cta">
              <button 
                className="btn btn-primary"
                onClick={() => window.dispatchEvent(new CustomEvent("openContactModal"))}
              >
                Prendre contact
              </button>
              <a
                className="phone-pill"
                href="https://wa.me/4917687563348"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Contacter sur WhatsApp"
              >
                <span className="phone-icon whatsapp-icon"><Icon.WhatsApp /></span>
                <span>Contacter sur WhatsApp</span>
              </a>
            </div>
          </div>

          <div className="hero-visual">
            <span className="dot d1"></span>
            <span className="dot d2"></span>
            <span className="dot d3"></span>
            <span className="dot d4"></span>

            <div className="rings"></div>
            <div className="blob-yellow"></div>
            <div className="blob-pink"></div>

            <div className="hero-photo" style={{ backgroundImage: `url(${heroPhoto})` }}></div>

            <div className="float-card float-strategies">
              <span className="ic"><Icon.Target /></span>
              <span>Stratégies ciblées</span>
              <span className="trend"></span>
            </div>

            <div className="contact-card">
              <div className="contact-card-top">
                <div className="avatar" style={{ backgroundImage: `url(${avatar})` }}></div>
                <div>
                  <div className="contact-name">
                    Brittani Seagle
                    <Icon.Edit style={{ opacity: .5 }} />
                  </div>
                  <div className="contact-email">info@discover.studio</div>
                </div>
              </div>
              <div className="contact-actions">
                <div className="contact-btn video">
                  <div className="badge"><Icon.Video /></div>
                  <div>Visio</div>
                </div>
                <div className="contact-btn audio">
                  <div className="badge"><Icon.PhoneFill /></div>
                  <div>Appel</div>
                </div>
              </div>
              <div className="contact-team">
                {team.map((src, i) => (
                  <div key={i} className="av" style={{ backgroundImage: `url(${src})` }}></div>
                ))}
                <div className="av more">15+</div>
              </div>
            </div>

            <div className="stat-card">
              <div className="donut"><span>2.5K</span></div>
              <div className="stat-card-text">
                <div className="lbl">Clients</div>
                <div className="val">Actifs</div>
              </div>
            </div>

            <div className="rocket-circle"><Icon.Rocket /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;