/* global React, Reveal */

// =========================================================
// WALL (landing variant) — identical to the home-page Wall,
// trimmed to five students for the paid-traffic page:
// Alan, Anastasia, Nikolina, Tariq, and Simon & Kim.
// Home page keeps the full wall.
// =========================================================
function WallLanding({ onBook }) {
  const items = [
    { name: "Alan W.",      product: "personal care",      year: "'21", tag: "1:1",    src: "assets/student-alan.jpg",      pos: "50% 40%" },
    { name: "Anastasia M.", product: "health & beauty",    year: "'21", tag: "1:1",    src: "assets/student-anastasia.jpg", pos: "55% 35%" },
    { name: "Nikolina H.",  product: "office & stationary", year: "'26", tag: "Cohort", src: "assets/student-nikolina.jpg",  pos: "50% 35%" },
    { name: "Tariq B.",     product: "amazon consulting",  year: "'22", tag: "1:1",    src: "assets/student-tariq.jpg",     pos: "50% 30%" },
    { name: "Simon & Kim",  product: "pets & baby",        year: "'26", tag: "Cohort", src: "assets/student-simon-kim.jpg", pos: "55% 35%" },
  ];

  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">
            Not testimonials. Not stock photos. Every face below said <em>"I don't know if I can do this"</em> — and then watched their dashboard prove them wrong.
          </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>100+</em> more, building right now.
          </div>
          <a className="wl__footer-link" href="#" onClick={(e) => { e.preventDefault(); onBook && onBook(); }}>
            Book your free discovery call →
          </a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { WallLanding });