// MEMORI — Hero (3 variants: type / watermark / imprint)
function Hero({ variant = 'type' }) {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <div className="hero-meta-top fade-up">
          <span>Personal branding</span><i style={{fontSize:'11px'}}></i>
          <span>LinkedIn acquisition</span>
        </div>

        <h1 className="hero-title fade-up">
          Faites de LinkedIn <em>un canal d'acquisition</em> rentable<span className="dot">.</span>
        </h1>

        <p className="hero-sub fade-up">
          Nous accompagnons les dirigeants, équipes et personnalités à construire une marque personnelle qui répond aux objectifs de votre entreprise.
        </p>

        <div className="hero-ctas fade-up">
          <a href="https://calendly.com/marlet-memori/decouverte" target="_blank" rel="noopener" className="btn btn-ruby" style={{borderRadius:'5px'}}>
            Réserver un appel <span className="arrow">→</span>
          </a>
          <a href="#realisations" className="btn btn-text">
            Voir nos réalisations <span className="arrow">→</span>
          </a>
        </div>

        <div className="hero-foot fade-up">
          <span><strong>+70</strong> dirigeants accompagnés</span>
          <span><strong>+5 ans</strong> d'expertise LinkedIn</span>
        </div>
      </div>

      {variant === 'watermark' && (
        <div className="hero-watermark" aria-hidden="true">MEMORI.</div>
      )}
      {variant === 'imprint' && (
        <svg className="hero-imprint" viewBox="0 0 600 600" aria-hidden="true">
          <defs>
            <radialGradient id="grad-imp" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#831625" stopOpacity="0.08"/>
              <stop offset="100%" stopColor="#831625" stopOpacity="0"/>
            </radialGradient>
          </defs>
          <circle cx="300" cy="300" r="280" fill="url(#grad-imp)"/>
          {[40,80,130,180,235,295].map((r, i) => (
            <circle key={r} cx="300" cy="300" r={r}
              fill="none" stroke="#222" strokeOpacity={0.06 + i*0.01}
              strokeWidth={i === 5 ? 0.6 : 0.4}
              strokeDasharray={i === 2 ? "2 6" : "none"} />
          ))}
          <text x="300" y="350" textAnchor="middle"
            fontFamily="Inter Tight" fontWeight="800" fontSize="280"
            fill="#222" opacity="0.05" letterSpacing="-0.06em">M</text>
        </svg>
      )}
    </section>
  );
}
Object.assign(window, { Hero });