/* global React, Reveal */

// =========================================================
// FREEDOM — the payoff. What the business actually bought.
// Sits right before the Final CTA.
// =========================================================
function Freedom() {
  const places = [
    { cls: "morocco", img: "assets/freedom-morocco.webp", place: "Marrakech", yr: "Morocco", alt: "Jay with a horse at a riad in Marrakech, Morocco" },
    { cls: "europe", img: "assets/freedom-europe.jpg", place: "Dubrovnik", yr: "Europe", alt: "Jay on a balcony over the Adriatic in Dubrovnik" },
    { cls: "nz", img: "assets/freedom-nz.jpeg", place: "Auckland", yr: "New Zealand", alt: "Jay looking out over the Auckland skyline" },
  ];

  return (
    <section id="freedom" className="section fr" data-screen-label="Freedom">
      <div className="container">
        <div className="fr__inner">
          <Reveal className="fr__top">
            <div>
              <div className="eyebrow">the point of it all</div>
              <h2 className="display fr__lead">The business runs. <em>I keep moving.</em></h2>
            </div>
            <p className="fr__intro">
              The goal was never a number — it was to <b>not be in one place</b>. Five years, no fixed
              address: Morocco, Europe, New Zealand and onward, never more than three months anywhere.
              That's what an Amazon business is actually for. Not a dashboard — <b>the freedom to choose
              where you wake up.</b>
            </p>
          </Reveal>

          <div className="fr__grid">
            {places.map((p, i) =>
              <Reveal key={i} className={"fr__photo " + p.cls} style={{ transitionDelay: `${i * 90}ms` }}>
                <img src={p.img} alt={p.alt} />
                <div className="fr__cap">
                  <span className="place">{p.place}</span>
                  <span className="yr">{p.yr}</span>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Freedom });