/* global React */

const TESTIMONIALS = [
{
  id: 1,
  initials: "MD",
  name: "Marie Dumas",
  meta: "Lyon · Maman de 2",
  quote:
  "Mamie n'a jamais voulu d'un smartphone. Avec Mily, elle a son journal chaque mois — et elle nous appelle pour commenter chaque photo. C'est devenu notre vrai lien."
},
{
  id: 2,
  initials: "MR",
  name: "Mathieu Renard",
  meta: "Bordeaux · Papa solo",
  quote:
  "Le format papier change tout. Mon père sort le journal sur la table du dimanche midi et le feuillette devant ses petits-enfants en visio. Magique."
},
{
  id: 3,
  initials: "GL",
  name: "Germaine Léonard",
  meta: "Quimper · Grand-mère, 71 ans",
  quote:
  "Je l'attends comme on attendait le journal local du village. Je le garde dans le tiroir du buffet, à côté des photos de mon mari."
},
{
  id: 4,
  initials: "CB",
  name: "Catherine Bonnet",
  meta: "Strasbourg · Marraine",
  quote:
  "Ma filleule a 6 ans, je suis loin. Mily est devenu le carnet de bord que je conservais avant à la main — sauf qu'aujourd'hui, c'est elle qui me raconte sa vie."
},
{
  id: 5,
  initials: "MK",
  name: "Mélody K.",
  meta: "Nantes · Maman de 3",
  quote:
  "On a essayé Famileo. La différence, c'est que Mily ressemble vraiment à un journal — papier épais, mise en page belle. On le garde, on ne le jette pas."
}];


function Testimonials({ featuredId = 1 }) {
  const featured = TESTIMONIALS.find((t) => t.id === featuredId) || TESTIMONIALS[0];
  const others = TESTIMONIALS.filter((t) => t.id !== featured.id);

  return (
    <section className="section testimonials-section" id="examples" data-screen-label="08 Testimonials">
      <div className="container">
        <div className="section-head reveal in">
          <h2 className="display-2">
            Les témoignages de <em className="accent">nos familles.</em>
          </h2>
          <div className="right">§ 04 — Témoignages</div>
        </div>

        <div className="test-grid">
          <article className="test-card featured reveal in" style={{ gridColumn: "span 7" }}>
            <div className="stars" aria-label="5 sur 5">★★★★★</div>
            <blockquote className="test-quote">« {featured.quote} »</blockquote>
            <div className="test-attr">
              <div className="test-avatar" aria-hidden="true">{featured.initials}</div>
              <div>
                <div className="test-name">{featured.name}</div>
                <div className="test-meta">{featured.meta}</div>
              </div>
            </div>
          </article>

          <div style={{ gridColumn: "span 5", display: "grid", gridTemplateColumns: "1fr", gap: 16 }}>
            {others.slice(0, 2).map((t) =>
            <article key={t.id} className="test-card reveal">
                <div className="stars" aria-label="5 sur 5">★★★★★</div>
                <blockquote className="test-quote">« {t.quote} »</blockquote>
                <div className="test-attr">
                  <div className="test-avatar" aria-hidden="true">{t.initials}</div>
                  <div>
                    <div className="test-name">{t.name}</div>
                    <div className="test-meta">{t.meta}</div>
                  </div>
                </div>
              </article>
            )}
          </div>

          {others.slice(2).map((t) =>
          <article key={t.id} className="test-card reveal" style={{ gridColumn: "span 6" }}>
              <div className="stars" aria-label="5 sur 5">★★★★★</div>
              <blockquote className="test-quote">« {t.quote} »</blockquote>
              <div className="test-attr">
                <div className="test-avatar" aria-hidden="true">{t.initials}</div>
                <div>
                  <div className="test-name">{t.name}</div>
                  <div className="test-meta">{t.meta}</div>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

function RibbonCTA() {
  return (
    <section className="ribbon" data-screen-label="09 Ribbon CTA">
      <div className="container inner">
        <div>
          <div className="eyebrow-light">2 minutes — Sans CB</div>
          <h2>
            Téléchargez l'app, créez votre famille, capturez, publiez, partagez !
          </h2>
        </div>
        <div className="badges">
          <StoreBadges />
        </div>
      </div>
    </section>);

}

Object.assign(window, { Testimonials, RibbonCTA, TESTIMONIALS });