/* global React, Reveal */

function Wall() {
  const items = [
    { name: "Alan W.",      product: "oral care",   year: "'21", tag: "1:1",    src: "assets/student-alan.jpg",      pos: "50% 40%" },
    { name: "Anastasia M.", product: "home care",   year: "'21", tag: "1:1",    src: "assets/student-anastasia.jpg", pos: "55% 35%" },
    { name: "Benjamin S.",  product: "supplements", year: "'24", tag: "1:1",    src: "assets/student-benjamin.jpg",  pos: "50% 35%" },
    { name: "Jeff J.",      product: "pet",         year: "'23", tag: "Cohort", src: "assets/student-jeff.jpg",      pos: "50% 30%" },
    { name: "Lenka Q.",     product: "home",        year: "'24", tag: "Cohort", src: "assets/student-lenka.jpg",     pos: "50% 30%" },
    { name: "Tariq B.",     product: "beauty",      year: "'25", tag: "1:1",    src: "assets/student-tariq.jpg",     pos: "50% 30%" },
    { name: "Jessica L.",   product: "pet",         year: "'24", tag: "1:1",    src: "assets/student-jessica.jpg",   pos: "50% 25%" },
    { name: "Nikolina H.",  product: "kitchen",     year: "'23", tag: "Cohort", src: "assets/student-nikolina.jpg",  pos: "50% 35%" },
    { name: "Priscilla Y.", product: "supplements", year: "'24", tag: "1:1",    src: "assets/student-priscilla.jpg", pos: "50% 25%" },
    { name: "Tim F.",       product: "baby",        year: "'22", tag: "1:1",    src: "assets/student-tim.jpg",       pos: "40% 40%" },
    { name: "Simon & Kim",  product: "wellness",    year: "'23", tag: "Cohort", src: "assets/student-simon-kim.jpg", pos: "55% 35%" },
    { name: "Patricia K.",  product: "home goods",  year: "'24", tag: "1:1",    src: "assets/student-patricia.jpg",  pos: "50% 30%" },
    { name: "Mared J.",     product: "kids",        year: "'22", tag: "Cohort", src: "assets/student-mared.jpg",     pos: "50% 35%" },
    { name: "Danielle A.",  product: "lifestyle",   year: "'21", tag: "1:1",    src: "assets/student-danielle.jpg",  pos: "55% 35%" },
    { name: "Claire Woodrow", product: "beauty",    year: "'23", tag: "1:1",    src: "assets/student-claire.jpg",    pos: "50% 30%" },
  ];

  return (
    <section id="wall" className="section wl">
      <div className="container">
        <Reveal className="wl__head">
          <div>
            <div className="eyebrow">The wall</div>
            <h2 className="display">
              Real people.<br />
              <em>Real products.</em>
            </h2>
          </div>
          <div className="wl__head-right">
            <b>Not testimonials. Not stock photos.</b> Every face below is someone who
            said <em>"I don't know if I can do this"</em> before they did — and <b>now ships product</b>.
          </div>
        </Reveal>

        <div className="wl__grid">
          {items.map((s, i) => (
            <Reveal key={i} delay={i * 50}>
              <div className="wl__card">
                <div className="wl__photo">
                  <div className="wl__photo-tag">{s.tag}</div>
                  {s.src ? (
                    <img src={s.src} alt={`${s.name} with ${s.product}`} style={{ objectPosition: s.pos || "center" }} />
                  ) : (
                    <div className="wl__photo-placeholder">[ photo · {s.name} with product ]</div>
                  )}
                </div>
                <div>
                  <div className="wl__caption">
                    <span className="wl__name">{s.name}</span>
                    <span className="wl__when">{s.year}</span>
                  </div>
                  <div className="wl__product">{s.product}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal className="wl__footer">
          <div className="wl__count">
            <em>3,000+</em> more, building right now.
          </div>
          <a className="wl__footer-link" href="https://www.instagram.com/amazonpreneur/" target="_blank" rel="noopener noreferrer">
            See the full wall on Instagram →
          </a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Wall });