/* global React */

function PullQuote() {
  return (
    <section className="pull" data-screen-label="04 Pull quote">
      <div className="container grid">
        <div className="label">Témoignage</div>
        <blockquote>« Journal d'excellente qualité le rendu est top top les grands parents l'attendent avec impatience et nous aussi! C'est une joie de le lire tous les mois. »



        </blockquote>
        <div className="attr">
          <div className="name">MAUD · R</div>
          <div className="meta">ABONNÉE DEPUIS 2 ANS</div>
        </div>
      </div>
    </section>);

}

function HowItWorks() {
  const steps = [
  {
    num: "01",
    photo: <img src="assets/images/Papi_autour_de_la_table_640x800.webp" alt="Papi autour à table avec ses enfants et petits enfants prêt pour faire une photo souvenir" loading="lazy"/>,
    title: "Vous photographiez",
    body:
    "Chaque membre de la famille publie ses photos et anecdotes du mois depuis l'app Mily ou le site internet, comme dans un mini réseau social privé. Jusqu'à 30 publications par journal."
  },
  {
    num: "02",
    photo: <img src="assets/images/Peyreficade_faconnage_et_impression-1280x1706.webp" alt="Une personne de l'atelier ESAT place les journaux dans l'imprimante professionnelle" loading="lazy"/>,
    title: "Nous imprimons",
    body:
    "Le dernier jour du mois, à 23h59 heure de Paris, votre journal se ferme. Nos ateliers de l'Hérault et de la Côte-d'Or impriment ense-uite un exemplaire par destinataire avec du papier semi-glaçé mais recyclé, encres végétales, façonnage à la main."
  },
  {
    num: "03",
    photo: <img src="assets/images/Mamie_connectée_journal_photo_Nouvelles_Petits-Enfants_1100x1460.webp" alt="Mamie lisant son journal dans le jardin fleuri et ensoleillée" loading="lazy"/>,
    title: "Ils reçoivent",
    body:
    "Sous 10 jours, les délais d'acheminement postal variant d'une région à l'autre, le journal photo arrive dans la boîte aux lettres de mamie, papi, tonton, marraine — autant d'abonnés que vous voulez. Aucune app, aucun écran requis."
  }];


  return (
    <section className="section" id="how" data-screen-label="05 How it works">
      <div className="container">
        <div className="section-head reveal in">
          <h3 className="display-2">
            Comment fonctionne <em className="accent">l'application Mily</em> ?
          </h3>
          <div className="right">§ 01 — Le rituel</div>
        </div>

        <div className="how-grid">
          {steps.map((s) =>
          <div className="how-col reveal" key={s.num}>
              <div className="how-num">{s.num} / 03</div>
              <div className="how-photo">{s.photo}</div>
              <h3 className="how-title">{s.title}</h3>
              <p className="how-body">{s.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function WhyUs() {
  const items = [
  {
    Icon: IconLeaf,
    title: "Un atelier solidaire et éco-responsable",
    desc:
    <>
    Chez Mily, nous valorisons <strong>l'artisanat et l'inclusion sociale</strong>. En partenariat avec un ESAT en Occitanie et en Côte d'Or, nous confions l'impression à des travailleurs handicapés talentueux. Vous bénéficiez d'un service de qualité exceptionnelle tout en soutenant l'emploi inclusif et en préservant la planête avec nos encres et papier éco-responsables.
    </>
  },
  {
    Icon: IconUsers,
    title: "Pensé pour toute la famille",
    desc:
    <>
    Enrichissez vos histoires avec un nombre illimité de contributeurs. <strong>Invitez toute la famille</strong> pour une expérience de partage collective inoubliable.
    </>
  },
  {
    Icon: IconNoLock,
    title: "Un abonnement sans engagement à 5,50€",
    desc:
    <>
    Nous souhaitons que les choses restent simples et transparentes chez Mily. Un seul tarif, 5,50 € par mois, dont la <strong>résiliation est facile</strong> en quelques clics depuis l'application. Télécharger la gratuitement et tester sereinement avec vos proches en toute simplicité.
    </>
  },
  {
    Icon: IconShield,
    title: "Une application privée et sécurisée",
    desc:
    <>
    La <strong>confidentialité de vos données</strong> est primordiale. Avec Mily, vos photos restent privées et sécurisées. Nous préservons vos moments en famille pour une tranquillité d'esprit totale.
    </>
  },
  {
    Icon: IconBook,
    title: "Jusqu'à 30 publications par journal",
    desc:
    <>
      <strong>Capturez, Publiez, Appréciez</strong> vos photos, anecdotes, dessins d'enfants… Chaque mois, jusqu'à 240 photos racontent votre vie de famille.
    </>
  },
  {
    Icon: IconThumb,
    title: "Mise en page automatique",
    desc:
    <>
    La mise en page de votre journal est facilitée pour votre confort. Choisissez un mode de présentation parmi ceux proposés, ajoutez votre photo, recadrez et le tour est joué !
    </>
  }];


  return (
    <section className="section why-section" data-screen-label="06 Why us">
      <div className="container">
        <div className="section-head reveal in">
          <h2 className="display-2">
            Pourquoi choisir <em className="accent">notre gazette familiale</em> ?
          </h2>
          <div className="right">§ 02 — Nos engagements</div>
        </div>

        <div className="why-grid">
          {items.map(({ Icon: I, title, desc }) =>
          <div className="why-card reveal" key={title}>
              <div className="why-icon">
                <I size={26} />
              </div>
              <div>
                <h3 className="why-title">{title}</h3>
                <p className="why-desc">{desc}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { PullQuote, HowItWorks, WhyUs });