/* global React */

function JournalCover() {
  return (
    <div className="journal cover" aria-label="Couverture du journal Mily — mai 2026">
      <div className="cover-inner">
        <div className="cover-mast">
          <div className="word">mily</div>
          <div className="iss">
            N° 024<br />
            Mai 2026<br />
            Famille Dupont
          </div>
        </div>
        <div className="cover-tag">Le rituel du mois</div>
        <div className="cover-title">
          Théo souffle <em>ses 4 bougies</em> — et papi raconte le jardin.
        </div>
        <div className="cover-photo">[ photo de couverture ]</div>
        <div className="cover-foot">
          <div className="item">
            <span className="k">Au sommaire</span>
            La fête au parc · Les premiers pas de Léa · La recette de mamie · Atelier vélo
          </div>
          <div className="item">
            <span className="k">Édition</span>
            Imprimé à Sète — Hérault · Livré sous 5 jours
          </div>
        </div>
      </div>
    </div>);

}

function JournalInside() {
  return (
    <div className="journal inside" aria-label="Page intérieure du journal Mily">
      <div className="spread-inner">
        <div className="spread-head">
          <span>P. 04 — Mai 2026</span>
          <span>Famille Dupont</span>
        </div>
        <div className="spread-title">La sortie au parc des Buttes-Chaumont</div>
        <div className="spread-grid">
          <div className="spread-photo featured" />
          <div className="spread-photo" />
          <div className="spread-photo" />
          <div className="spread-photo" />
          <div className="spread-photo" />
          <div className="spread-photo" />
        </div>
        <div className="spread-caption">
          « Théo a couru après les canards pendant une heure — il en parle encore. » — Marie, 5 mai
        </div>
      </div>
    </div>);

}

function Hero({ tweaks }) {
  const title = tweaks.heroTitle || "Le lien entre les générations en quelques clics.";

  // Split into two pieces — last 3 words rendered as accent
  const renderTitle = () => {
    const trimmed = title.trim();
    const words = trimmed.split(/\s+/);
    if (words.length <= 3) {
      return <span className="accent">{trimmed}</span>;
    }
    // Find the natural accent — everything after the last comma, or last 3 words
    const commaIdx = trimmed.lastIndexOf(",");
    let head, accent;
    if (commaIdx > -1 && commaIdx < trimmed.length - 4) {
      head = trimmed.slice(0, commaIdx + 1);
      accent = trimmed.slice(commaIdx + 1).trim();
    } else {
      head = words.slice(0, -3).join(" ");
      accent = words.slice(-3).join(" ");
    }
    return (
      <>
        {head}{" "}
        <span className="accent">{accent}</span>
      </>);

  };

  return (
    <section className="hero" data-screen-label="03 Hero" id="service">
      <div className="container grid">
        <div className="hero-text reveal in">
          <span className="pill">
            <span className="pulse" />
            Chaque journal — livré avant le 10 du mois
          </span>
          <h1 className="sr-only">Mily — Le journal photo familial imprimé en France qui réunit les familles</h1>
          <p className="display-1">{renderTitle()}</p>
          <br/>
          <p className="lead">Chaque mois, vous publiez photos et nouvelles de votre famille depuis l'app Mily. Nous imprimons un véritable journal photo depuis nos ateliers de l'Hérault et de la Côte-d'Or et nous l'envoyons dans la boîte aux lettres de mamie, papi, marraine ou toute personne qui vous est chère, sans qu'ils n'aient besoin d'un smartphone.




          </p>
          <div className="ctas">
            <a className="btn btn-primary" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/watch?v=ExhxUhcpE6M">
              Découvrir Mily
            </a>
            <StoreBadges />
          </div>
          <div className="stats">
            <div className="stat">
              <div className="num">5,50 €</div>
              <div className="label">PAR MOIS / DESTINATAIRE</div>
            </div>
            <div className="stat">
              <div className="num">30</div>
              <div className="label">PUBLICATIONS / JOURNAL</div>
            </div>
            <div className="stat">
              <div className="num">240</div>
              <div className="label">PHOTOS / JOURNAL</div>
            </div>
            <div className="stat">
              <div className="num">SANS</div>
              <div className="label">Engagement</div>
            </div>
          </div>
        </div>

        <div className="journal-stack reveal in">
          {/* <JournalInside />
          <JournalCover /> */}
          <div className="how-journal">
            <img src="assets/images/Couverture-journal-photos-famille_1769x2325.png" alt="Le journal Mily adressé à Marie Petit" loading="eager"/>
          </div>
          <div className="promo-stamp" aria-label="Mily fait les choses en grand sauf le prix">
            <span className="big">5,50 €</span>
            <span className="small">SANS ENGAGEMENT</span>
          </div>
        </div>
      </div>
    </section>);}

Object.assign(window, { Hero, JournalCover, JournalInside });