const Auteur = () => {
  return (
    <section className="auteur" data-screen-label="08 Auteur">
      <div className="shell">
        <div className="section-label"><span className="num">§ 07</span><span>qui t'écrit ?</span></div>

        <div className="auteur-grid">
          <div className="reveal">
            <div className="auteur-portrait">
              <svg viewBox="0 0 300 400" preserveAspectRatio="xMidYMid slice">
                <rect width="300" height="400" fill="#FFC93C"/>
                {/* body */}
                <path d="M40 400 C40 340, 90 310, 150 310 C210 310, 260 340, 260 400 Z" fill="#1B1840"/>
                {/* collar red */}
                <path d="M130 315 L150 338 L170 315" fill="none" stroke="#FF5A4A" strokeWidth="4" strokeLinecap="round"/>
                {/* head + hair */}
                <ellipse cx="150" cy="175" rx="58" ry="68" fill="#F4C896"/>
                <path d="M90 165 C90 110, 118 78, 150 78 C182 78, 210 110, 210 165 C210 150, 198 138, 184 135 C180 122, 165 118, 150 120 C135 118, 120 122, 116 135 C102 138, 90 150, 90 165 Z" fill="#1B1840"/>
                {/* eyebrows */}
                <path d="M126 158 L142 155" stroke="#1B1840" strokeWidth="3.5" strokeLinecap="round"/>
                <path d="M158 155 L174 158" stroke="#1B1840" strokeWidth="3.5" strokeLinecap="round"/>
                {/* eyes */}
                <circle cx="134" cy="170" r="3" fill="#1B1840"/>
                <circle cx="166" cy="170" r="3" fill="#1B1840"/>
                {/* smile */}
                <path d="M132 212 Q150 224, 168 212" fill="none" stroke="#1B1840" strokeWidth="3" strokeLinecap="round"/>
                {/* blush */}
                <circle cx="115" cy="195" r="7" fill="#FF5A4A" opacity=".35"/>
                <circle cx="185" cy="195" r="7" fill="#FF5A4A" opacity=".35"/>

                {/* annotation: TDAH */}
                <path d="M218 180 Q250 170, 272 162" stroke="#FF5A4A" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
                <text x="230" y="155" fontFamily="Caveat, cursive" fontSize="26" fill="#FF5A4A" fontWeight="700">TDAH ↗</text>

                {/* annotation: HPI */}
                <path d="M85 230 Q50 220, 28 215" stroke="#4D6BFF" strokeWidth="2.5" fill="none" strokeLinecap="round"/>
                <text x="10" y="205" fontFamily="Caveat, cursive" fontSize="24" fill="#4D6BFF" fontWeight="700">HPI ↖</text>

                {/* little star */}
                <text x="230" y="280" fontFamily="Caveat, cursive" fontSize="48" fill="#FF5A4A">✦</text>
              </svg>
              <div className="auteur-stamp">DAMIEN · 37 ANS</div>
            </div>
          </div>

          <div className="reveal reveal-delay-1">
            <div className="eyebrow" style={{marginBottom:24}}>L'auteur, sans filtre</div>
            <h2>
              J'ai cramé <span className="highlight">5 ans</span><br/>
              avant de comprendre<br/>
              que mon cerveau <em>n'était pas le problème.</em>
            </h2>

            <p>
              37 ans. Traits HPI. Hypersensible. J'ai créé une plateforme <strong>en une semaine</strong>
              puis j'ai oublié qu'elle devait me rapporter de l'argent pendant 4 mois.
            </p>
            <p>
              J'ai tapé le forfait Claude MAX plusieurs mois d'affilée.
              Je déteste les reporting. Je m'agace des gens lents. Je lance 15 projets en parallèle.
            </p>
            <p>
              Ces 50 prompts sont <strong>ce que j'aurais voulu avoir il y a 5 ans.</strong>
              Tu vas te reconnaître, promis.
            </p>

            <div className="auteur-stats">
              <div className="auteur-stat">
                <div className="auteur-stat-num">5</div>
                <div className="auteur-stat-label">Ans de galère</div>
              </div>
              <div className="auteur-stat">
                <div className="auteur-stat-num">15</div>
                <div className="auteur-stat-label">Projets en //</div>
              </div>
              <div className="auteur-stat">
                <div className="auteur-stat-num">1</div>
                <div className="auteur-stat-label">Méthode qui marche</div>
              </div>
            </div>

            <div className="auteur-sign">— Damien</div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Auteur = Auteur;