/* global React, Reveal, ArrowGlyph */

function Meetups({ onBook, containedStrip = false }) {
  const POST_URL = "https://www.instagram.com/amazonpreneur/";
  const VIDEO_URL = "https://www.instagram.com/p/CIOsCrMhh0n/";
  const GROUP_URL = "https://www.meetup.com/selling-on-amazon/";
  const [playing, setPlaying] = React.useState(false);
  const videoRef = React.useRef(null);

  const sheet = [
    { loc: "Gold Coast · Australia",   when: "Feb '20",  src: "assets/meetup-mauritius.jpg",     pos: "50% 40%" },
    { loc: "Auckland · New Zealand",      when: "Nov '21",  src: "assets/meetup-auckland-table.jpg", pos: "50% 35%" },
    { loc: "Gold Coast · Australia", when: "Feb '20", src: "assets/meetup-rooftop.jpg", pos: "55% 35%" },
    { loc: "Gold Coast · Australia", 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: "Las Vegas · United States",  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" style={{ position: "relative" }}>
            <div className="eyebrow mt__eb">In the room</div>
            <h2 className="display mt__headline">
              When I'm not online,<br />
              <em>I'm 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. It's grown into <strong>the largest — and only
              seasoned — Amazon meetup in New Zealand</strong>. Auckland CBD by default; pop-ups in
              Sydney, Morocco and Europe on rotation. 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>
              <a className="mt__meta-item mt__meta-rating" href={GROUP_URL} target="_blank" rel="noopener noreferrer">
                <div className="mt__meta-num mt__meta-stars">
                  <span className="mt__stars" aria-hidden="true">★★★★★</span> <em>5.0</em>
                </div>
                <div className="mt__meta-lbl">37 ratings on Meetup ↗</div>
              </a>
            </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.meetup.com/selling-on-amazon/" target="_blank" rel="noopener noreferrer">
                See past meetups
              </a>
            </div>
            <div className="mt__post-anno" aria-hidden="true" style={{ position: "absolute", left: 324, top: -16 }}>
              <span className="mt__post-anno-txt">Our Auckland meetup</span>
              <svg className="mt__post-anno-arrow" viewBox="0 0 128 40" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M4 10 C 42 20, 84 26, 122 28" />
                <path d="M122 28 l -15 -6" />
                <path d="M122 28 l -13 8" />
              </svg>
            </div>
          </Reveal>

          <Reveal className="mt__post">
            <div className="mt__post-header">
              <div className="mt__post-avatar"><img src="assets/jay-avatar.png" alt="Jay" /></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>

            <div className="mt__post-image">
              <video
                ref={videoRef}
                className="mt__post-video"
                src="assets/meetup-video.mp4"
                poster="assets/meetup-post.jpg"
                playsInline
                preload="none"
                controls={playing}
                onPlay={() => setPlaying(true)}
              ></video>
              {!playing && (
                <button type="button" className="mt__post-trigger" onClick={() => { const v = videoRef.current; if (v) { v.play().catch(() => {}); } }} aria-label="Play meetup video">
                  <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>
                </button>
              )}
            </div>

            <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" + (containedStrip ? " mt__sheet--contained" : "")}>
          <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" }} />
                    ) : (
                      <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 });