// Hero.jsx — three treatments selectable via tweaks

const { useEffect: heroUseEffect } = React;

function Hero({ variant, script, witty, onCTA, onSecondary }) {
  // variant: 'photo' | 'split' | 'type'
  if (variant === 'split') return <HeroSplit script={script} witty={witty} onCTA={onCTA} onSecondary={onSecondary} />;
  if (variant === 'type') return <HeroType script={script} witty={witty} onCTA={onCTA} onSecondary={onSecondary} />;
  return <HeroPhoto script={script} witty={witty} onCTA={onCTA} onSecondary={onSecondary} />;
}

const HERO_BG_URL = window.ntrAsset('heroArch');

function HeroPhoto({ script, witty, onCTA, onSecondary }) {
  return (
    <section className="ntr-hero ntr-hero--photo" data-screen-label="Hero / Photo">
      <div className="ntr-hero-bg" style={{ backgroundImage: `url(${HERO_BG_URL})` }} aria-hidden="true" />
      <div className="ntr-hero-tint" aria-hidden="true" />
      <div className="ntr-hero-grain" aria-hidden="true" />
      <div className="ntr-hero-photo-inner">
        <div className="ntr-hero-eyebrow">
          <span className="ntr-rule" /> Ardèche · Drôme · Depuis 2026 <span className="ntr-rule" />
        </div>
        <h1 className="ntr-hero-h1">
          L'IMMOBILIER,<br />
          {script ?
          <span className="ntr-hero-script">l'esprit léger.</span> :
          <span className="ntr-hero-italic">L'ESPRIT LÉGER.</span>}
        </h1>
        <p className="ntr-hero-lead">
          {witty ?
          <>Une agence de proximité, sans baratin, sans surprise.<br />Un agent diplômé notaire, la qualité de l'accompagnement, une relation de confiance.</> :
          <>Agence indépendante fondée par un diplômé notaire.<br />Un audit juridique de votre dossier <em>avant</em> la mise en vente, pour une signature sans mauvaise surprise.</>}
        </p>
        <div className="ntr-hero-ctas">
          <button className="ntr-btn ntr-btn--primary" onClick={onCTA} style={{ backgroundColor: "rgb(200, 117, 76)" }}>Estimer mon bien</button>
          <button className="ntr-btn ntr-btn--ghost-light" onClick={onSecondary}>Voir nos biens →</button>
        </div>
        <div className="ntr-hero-foot">
          <div className="ntr-hero-stat">
            <div className="ntr-hero-stat-n" style={{ color: "rgb(249, 244, 238)" }}>8<span></span></div>
            <div className="ntr-hero-stat-l">ans en étude<br />notariale</div>
          </div>
          <div className="ntr-hero-stat">
            <div className="ntr-hero-stat-n" style={{ color: "rgb(249, 244, 238)" }}>1 000<span style={{ fontSize: "28.8px", color: "rgb(249, 244, 238)" }}>+</span></div>
            <div className="ntr-hero-stat-l">dossiers<br />traités</div>
          </div>
          <div className="ntr-hero-stat">
            <div className="ntr-hero-stat-n" style={{ color: "rgb(249, 244, 238)" }}>40<span style={{ fontSize: "28.8px", color: "rgb(249, 244, 238)" }}> +</span></div>
            <div className="ntr-hero-stat-l">points de contrôle<br />avant signature</div>
          </div>
          <div className="ntr-hero-stat">
            <div className="ntr-hero-stat-n" style={{ color: "rgb(249, 244, 238)" }}>0 €</div>
            <div className="ntr-hero-stat-l">avis de valeur<br />jusqu'au 31/12/26</div>
          </div>
        </div>
      </div>
    </section>);

}

function HeroSplit({ script, witty, onCTA, onSecondary }) {
  return (
    <section className="ntr-hero ntr-hero--split" data-screen-label="Hero / Split">
      <div className="ntr-hero-split-text">
        <div className="ntr-hero-eyebrow ntr-hero-eyebrow--dark">
          <span className="ntr-rule" /> Ardèche · Drôme
        </div>
        <h1 className="ntr-hero-h1 ntr-hero-h1--dark">
          L'immobilier,<br />
          {script ?
          <span className="ntr-hero-script ntr-hero-script--brick">l'esprit léger.</span> :
          <em className="ntr-hero-italic--brick">l'esprit léger.</em>}
        </h1>
        <p className="ntr-hero-lead ntr-hero-lead--dark">
          {witty ?
          "Pas de vitrine clinquante, pas de discours commercial : un diplômé notaire qui audite votre dossier avant qu'il fasse pleurer chez le notaire." :
          "Une agence indépendante fondée par un diplômé notaire. Un audit juridique de votre dossier avant la mise en vente."}
        </p>
        <div className="ntr-hero-ctas">
          <button className="ntr-btn ntr-btn--primary" onClick={onCTA}>Estimer mon bien</button>
          <button className="ntr-btn ntr-btn--ghost" onClick={onSecondary}>Voir nos biens →</button>
        </div>
      </div>
      <div className="ntr-hero-split-portrait">
        <img src={window.ntrAsset('maximeSuit')} alt="Maxime Tejada" />
        <div className="ntr-hero-split-tag">
          <div className="ntr-hero-split-tag-name">Maxime Tejada</div>
          <div className="ntr-hero-split-tag-role">Diplômé notaire · Fondateur</div>
        </div>
        <div className="ntr-hero-split-watermark">N</div>
      </div>
    </section>);

}

function HeroType({ script, witty, onCTA, onSecondary }) {
  return (
    <section className="ntr-hero ntr-hero--type" data-screen-label="Hero / Type">
      <div className="ntr-hero-eyebrow ntr-hero-eyebrow--dark">
        <span className="ntr-rule" /> Agence immobilière · Ardèche · Drôme <span className="ntr-rule" />
      </div>
      <h1 className="ntr-hero-mega">
        L'IMMOBILIER,
        <br />
        {script ?
        <span className="ntr-hero-script ntr-hero-script--brick ntr-hero-script--big">l'esprit léger.</span> :
        <em className="ntr-hero-italic--brick">L'ESPRIT&nbsp;LÉGER.</em>}
      </h1>
      <div className="ntr-hero-type-foot">
        <p className="ntr-hero-type-blurb">
          {witty ?
          "Une agence sans vitrine, sans baratin, et avec un diplômé notaire dedans. Plus rare qu'une succession sans embrouille." :
          "Agence indépendante fondée par un diplômé notaire. Un audit juridique de votre dossier avant la mise en vente, pour une signature sans surprise."}
        </p>
        <div className="ntr-hero-ctas">
          <button className="ntr-btn ntr-btn--primary" onClick={onCTA}>Estimer mon bien</button>
          <button className="ntr-btn ntr-btn--ghost" onClick={onSecondary}>Voir nos biens →</button>
        </div>
      </div>
      <img className="ntr-hero-type-portrait" src={window.ntrAsset('maximePortrait1')} alt="Maxime" />
    </section>);

}

window.Hero = Hero;