/* global React, Reveal, ArrowGlyph */

function Meetups({ onBook }) {
  const POST_URL = "https://www.instagram.com/p/CIOsCrMhh0n/";
  const sheet = [
    { loc: "Mauritius retreat",   when: "Feb '20",  src: "assets/meetup-mauritius.jpg",     pos: "50% 40%" },
    { loc: "Auckland · 1:1",      when: "Nov '21",  src: "assets/meetup-auckland-table.jpg", pos: "50% 35%" },
    { loc: "Digital Experts retreat", when: "Feb '20", src: "assets/meetup-rooftop.jpg", pos: "55% 35%" },
    { loc: "Mauritius · downtime", when: "Feb '20", src: "assets/meetup-balcony.jpg", pos: "60% 50%" },
    { loc: "Canton Fair · China", when: "Sept '19", src: "assets/meetup-canton.jpg",        pos: "50% 30%" },
    { loc: "Sellercon · London",  when: "May '19",  src: "assets/meetup-selfie.jpg",        pos: "50% 30%" },
  ];
  return (
    <section id="meetups" className="section mt">
      <div className="container">
        <div className="mt__grid">
          <Reveal className="mt__copy">
            <div className="eyebrow mt__eb">In the room</div>
            <h2 className="display mt__headline">
              When we're not online,<br />
              <em>we're in person.</em>
            </h2>
            <p className="mt__body">
              <strong>Twice a year</strong> I get a room of sellers together — coffee, whiteboards,
              real talk about real catalogs. Auckland CBD by default; pop-ups in
              Sydney, Bali and London on rotation. <strong>It's where coaching
              stops being abstract.</strong> If you're nearby, <strong>you're invited</strong>.
            </p>

            <div className="mt__meta">
              <div>
                <div className="mt__meta-num"><em>300+</em></div>
                <div className="mt__meta-lbl">sellers through the door</div>
              </div>
              <div>
                <div className="mt__meta-num">34</div>
                <div className="mt__meta-lbl">rooms since 2017</div>
              </div>
              <div>
                <div className="mt__meta-num">6</div>
                <div className="mt__meta-lbl">cities on rotation</div>
              </div>
            </div>

            <div className="mt__cta-row">
              <button className="btn btn--primary" onClick={onBook}>
                Get on the invite list <ArrowGlyph />
              </button>
              <a className="btn btn--ghost" href="https://www.instagram.com/amazonpreneur/" target="_blank" rel="noopener noreferrer">
                See past meetups
              </a>
            </div>
          </Reveal>

          <Reveal className="mt__post">
            <div className="mt__post-header">
              <div className="mt__post-avatar">J</div>
              <div className="mt__post-handle">
                <strong>@amazonpreneur</strong>
                <span>Auckland · NZ</span>
              </div>
              <a className="mt__post-link" href={POST_URL} target="_blank" rel="noopener noreferrer">
                View on Instagram →
              </a>
            </div>

            <a href={POST_URL} target="_blank" rel="noopener noreferrer" className="mt__post-image">
              <img src="assets/meetup-post.jpg" alt="Jay at an Auckland meetup, in conversation with a seller" />
              <div className="mt__post-pulse">
                <span></span> Live · in person
              </div>
              <div className="mt__post-play">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="currentColor">
                  <path d="M7 4l11 7-11 7V4z" />
                </svg>
              </div>
            </a>

            <div className="mt__post-caption">
              <strong>Auckland Meetup · Sept 2020</strong><br />
              "Amazing 4-hour meet-up on Sunday with a full packed house.
              Hearing everyone's stories, making connections, finally seeing people
              in person — this is the work I love most."
            </div>
          </Reveal>
        </div>

        <Reveal className="mt__sheet">
          <div className="mt__sheet-head">
            <div className="mt__sheet-title">Contact sheet · recent rooms</div>
            <div className="mt__sheet-meta">
              <em>34</em> meetups · 6 cities · hover to pause
            </div>
          </div>
          <div className="mt__filmstrip" aria-label="Recent meetups">
            <div className="mt__filmstrip-track">
              {[...sheet, ...sheet, ...sheet].map((p, i) => (
                <figure className="mt__filmstrip-tile" key={i} aria-hidden={i >= sheet.length}>
                  <div className="mt__filmstrip-photo">
                    {p.src ? (
                      <img src={p.src} alt={p.loc} style={{ objectPosition: p.pos || "center" }} loading="lazy" />
                    ) : (
                      <div className="mt__sheet-placeholder">[ {p.loc} ]</div>
                    )}
                  </div>
                  <figcaption className="mt__filmstrip-cap">
                    <span className="mt__filmstrip-loc">{p.loc}</span>
                    <span className="mt__filmstrip-when">{p.when}</span>
                  </figcaption>
                </figure>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Meetups });