// ============================================================
// ATHAR — Pages 1–5 (main site)
// ============================================================

// ---------- Shared: Footer ----------
function Footer() {
  return (
    <footer className="foot">
      <div className="foot__left">A trace · أثر</div>
      <div className="foot__brand">Athar</div>
      <div className="foot__right">© 2026 · Made in Beirut</div>
    </footer>
  );
}
window.Footer = Footer;

// ---------- PAGE 1: Landing ----------
function Landing() {
  return (
    <React.Fragment>
      {/* HERO */}
      <section className="landing" data-screen-label="01 Landing — hero">
        <div className="landing__motes" aria-hidden="true">
          <span className="landing__mote landing__mote--a"></span>
          <span className="landing__mote landing__mote--b"></span>
          <span className="landing__mote landing__mote--c"></span>
          <span className="landing__mote landing__mote--d"></span>
        </div>
        <h1 className="landing__brand-ar" lang="ar" dir="rtl">أثر</h1>
        <div className="landing__brand-en">ATHAR</div>
        <hr className="rule" aria-hidden="true" />
        <p className="landing__tagline">A gift that speaks what words cannot.</p>
        <a className="btn landing__cta" href="#/select">Begin</a>
        <div className="landing__scroll">Scroll</div>
      </section>

      {/* FEATURED RELEASE — slim banner */}
      <section data-screen-label="01 Landing — release">
        <div className="release">
          <span className="release__eyebrow">Currently shipping</span>
          <p className="release__line">
            <strong>Edition I · 2026.</strong> Numbered, never reprinted.
            Ships within three working days from Beirut.
          </p>
          <a className="release__cta" href="#/select">Browse the six →</a>
        </div>
      </section>

      {/* THE HOUSE — manifesto, asymmetric two-column with drop cap */}
      <section className="ed" data-screen-label="01 Landing — the house" data-reveal>
        <div className="house">
          <aside className="house__aside">
            <span className="ed-eyebrow">The House</span>
            <hr className="ed-rule" aria-hidden="true" />
            <p className="house__aside-title">A trace is what something leaves behind.</p>
            <image-slot
              id="landing-atelier"
              class="img-slot img-slot--portrait"
              placeholder="Drop an atelier photograph"
              style={{marginTop: '24px'}}
            ></image-slot>
          </aside>
          <div className="house__body">
            <p className="dropcap">
              <span className="dropcap__letter">T</span>he word <em>athar</em> is Arabic for a trace. What the heat leaves
              on a chair after someone has gone. The scent of a letter that has
              been opened twice. The mark something makes by being in a room,
              and then by being absent from it.
            </p>
            <p>
              Athar was founded on a single idea: that the strongest gestures
              are the ones we cannot keep. A perfume is the first half of that
              thought. A message, written for one person and read once, is the
              second. The two arrive together.
            </p>
            <p>
              We make six fragrances. Each is built around a single hour. The
              first glance. The first silence. The hour that won't stop coming
              back. The composition is what that hour smells like — top, heart,
              base — the way memory does it, not the way time does.
            </p>
            <p>
              The result is a luxury house that does not ask to be remembered.
              It asks to be felt — and then released.
            </p>
          </div>
        </div>
      </section>

      {/* PULL QUOTE — dark espresso surface */}
      <section className="surface-dark" data-screen-label="01 Landing — pull quote">
        <div className="ed--prose">
          <div className="pullquote">
            <span className="pullquote__mark" aria-hidden="true">“</span>
            <p className="pullquote__text">
              A perfume is a trace. A letter is a trace. The thing you almost
              said is a trace.
            </p>
            <span className="pullquote__attr">From the house manifesto · 2026</span>
          </div>
        </div>
      </section>

      {/* PERFUMER'S NOTE */}
      <section className="ed ed--tight" data-screen-label="01 Landing — perfumer's note" data-reveal>
        <div className="note-block">
          <div>
            <span className="note-block__label">From the perfumer</span>
            <image-slot
              id="landing-perfumer"
              class="img-slot img-slot--portrait"
              placeholder="Drop a portrait of the perfumer"
              style={{marginTop: '20px', maxWidth: '260px'}}
            ></image-slot>
          </div>
          <div>
            <p className="note-block__quote">
              I do not compose for a body. I compose for a moment. The first
              glance. The room that has not yet been entered. The chair that
              has just been left. A bottle of Athar is not a fragrance you wear
              for the day. It is the fragrance of the day you are remembering.
            </p>
            <p className="note-block__sig">
              <strong>Layla Khoury</strong> &nbsp;·&nbsp; Master Perfumer, Beirut
            </p>
          </div>
        </div>
      </section>

      {/* THE SIX — refined collection */}
      <section className="ed" data-screen-label="01 Landing — the six" data-reveal>
        <div className="six">
          <div className="six__head">
            <span className="ed-eyebrow">The Six</span>
            <h2 className="six__title">Each number is a different way of saying it.</h2>
            <p className="six__intro">
              Six numerals. Six private declarations. None of them sequential —
              each is a moment, given a number.
            </p>
          </div>
          <div className="six__grid">
            {window.PERFUME_ORDER.map((n) => {
              const p = window.PERFUMES[n];
              return (
                <a key={n} className="six__item" href={`#/select/${n}`} aria-label={`№${n} — ${p.en} — $${p.price}`}>
                  <window.AtharBottle n={n} ariaLabel={`Flacon №${n}`} />
                  <span className="six__item-ar" lang="ar" dir="rtl">{p.ar}</span>
                  <span className="six__item-mood">{p.mood}</span>
                  <span className="six__item-price">${p.price}</span>
                </a>
              );
            })}
          </div>
          <div className="six__foot">
            <a className="btn" href="#/select">Browse the six</a>
          </div>
        </div>
      </section>

      {/* THE FILM — stock-footage moment */}
      <section className="surface-dark" data-screen-label="01 Landing — the film" data-reveal>
        <div className="ed">
          <div className="six__head">
            <span className="ed-eyebrow">The Film</span>
            <h2 className="six__title">Sixty seconds in the workshop.</h2>
            <p className="six__intro">
              An ambient clip from the Beirut atelier — the hands that blend,
              fill, and seal every flacon.
            </p>
          </div>
          <div className="film">
            <div className="film__frame">
              <video
                className="film__video"
                autoPlay muted loop playsInline preload="metadata"
                poster="https://images.pexels.com/photos/965989/pexels-photo-965989.jpeg?auto=compress&cs=tinysrgb&w=1600"
              >
                <source src="https://cdn.pixabay.com/video/2022/12/19/143028-781867441_large.mp4" type="video/mp4" />
                <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4" />
              </video>
              <div className="film__overlay">
                <p className="film__chap">“The atelier opens at six, before the city does.”</p>
                <span className="film__meta">01:00 · Beirut</span>
              </div>
            </div>
            <div className="film__chapters">
              <div className="film__chapter" data-reveal data-reveal-delay="1">
                <span className="film__chapter-num">Chapter I</span>
                <div className="film__chapter-title">The blending bench.</div>
                <p className="film__chapter-body">A morning ritual. Drops counted by hand into the maceration flask.</p>
              </div>
              <div className="film__chapter" data-reveal data-reveal-delay="2">
                <span className="film__chapter-num">Chapter II</span>
                <div className="film__chapter-title">The pour.</div>
                <p className="film__chapter-body">Fifty millilitres, weighed twice. The neck is fitted before the wax.</p>
              </div>
              <div className="film__chapter" data-reveal data-reveal-delay="3">
                <span className="film__chapter-num">Chapter III</span>
                <div className="film__chapter-title">The seal.</div>
                <p className="film__chapter-body">Wax over silk thread. The card is slipped in last, face down.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* GIFT SETS — burgundy product surface */}
      <section className="surface-burgundy" data-screen-label="01 Landing — gift sets">
        <div className="ed">
          <div className="six__head">
            <span className="ed-eyebrow">Gift Sets</span>
            <h2 className="six__title">For the gestures that need more than one number.</h2>
            <p className="six__intro">
              Three bundles — each in a single sealed box, with one card and a
              single sixty-second message tied to the set.
            </p>
          </div>
          <div className="gifts">
            {window.GIFT_SETS.map((g) => (
              <div key={g.id} className="gift">
                <image-slot
                  id={`gift-${g.id}`}
                  class="img-slot gift__img"
                  placeholder={`Drop a photo of ${g.title}`}
                ></image-slot>
                <div className="gift__head">
                  <div className="gift__title">{g.title}</div>
                  <div className="gift__nums" aria-label="included numbers">
                    {g.nums.map((n) => <span key={n}>№ {n}</span>)}
                  </div>
                </div>
                <p className="gift__body">{g.body}</p>
                <div className="gift__price-row">
                  <div>
                    <span className="price price--lg">${g.price}</span>
                  </div>
                  <div className="gift__saving">Save ${g.saving}</div>
                </div>
                <a className="btn" href="#/checkout">Gift this set</a>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* THE RITUAL — vertical editorial numbered list */}
      <section className="ed" data-screen-label="01 Landing — the ritual" data-reveal>
        <div className="six__head">
          <span className="ed-eyebrow">The Ritual</span>
          <h2 className="six__title">A gesture in three acts.</h2>
        </div>
        <div className="ritual">
          <div className="ritual__row">
            <div className="ritual__num">I</div>
            <div className="ritual__title">Choose a number.</div>
            <p className="ritual__body">
              Six fragrances. Each one is a different private declaration. You
              are not choosing a scent. You are choosing what you want to say.
            </p>
          </div>
          <div className="ritual__row">
            <div className="ritual__num">II</div>
            <div className="ritual__title">Write a message, or leave it blank.</div>
            <p className="ritual__body">
              Use the signature message tied to the number, or compose your
              own. Sixty seconds is short. We recommend writing two lines.
            </p>
          </div>
          <div className="ritual__row">
            <div className="ritual__num">III</div>
            <div className="ritual__title">Give the bottle.</div>
            <p className="ritual__body">
              A card arrives sealed inside the box — no instructions, only a
              wordmark and a small printed code. They scan it. They read.
              They have sixty seconds. Then the message is gone.
            </p>
          </div>
        </div>
      </section>

      {/* IN THE PRESS — dark accent */}
      <section className="surface-dark" data-screen-label="01 Landing — press">
        <div className="ed">
          <div className="six__head">
            <span className="ed-eyebrow">In the press</span>
            <h2 className="six__title">A quiet welcome.</h2>
          </div>
          <div className="press">
            {window.PRESS.map((p, i) => (
              <div key={i} className="press__item">
                <p className="press__quote">“{p.quote}”</p>
                <div className="press__org">{p.org}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* MATERIALS */}
      <section className="ed" data-screen-label="01 Landing — materials" data-reveal>
        <div className="six__head">
          <span className="ed-eyebrow">Materials</span>
          <h2 className="six__title">Composed in two cities, from six origins.</h2>
          <p className="six__intro">
            Nothing synthetic is added for warmth. Nothing is filtered to last
            longer than it should. A trace is a trace.
          </p>
        </div>
        <div className="materials">
          <div className="material">
            <div className="material__head">
              <div className="material__name">Bergamot</div>
              <div className="material__origin">Calabria</div>
            </div>
            <p className="material__body">Cold-pressed in the morning, before the fruit warms.</p>
          </div>
          <div className="material">
            <div className="material__head">
              <div className="material__name">Rose absolute</div>
              <div className="material__origin">Isparta</div>
            </div>
            <p className="material__body">Picked in May, in the four hours before sunrise.</p>
          </div>
          <div className="material">
            <div className="material__head">
              <div className="material__name">Oud</div>
              <div className="material__origin">Assam</div>
            </div>
            <p className="material__body">Aged eighteen years. Heart-wood, never the bark.</p>
          </div>
          <div className="material">
            <div className="material__head">
              <div className="material__name">Iris</div>
              <div className="material__origin">Florence</div>
            </div>
            <p className="material__body">Rhizomes dried three winters before they are pressed.</p>
          </div>
          <div className="material">
            <div className="material__head">
              <div className="material__name">Vetiver</div>
              <div className="material__origin">Haiti</div>
            </div>
            <p className="material__body">Roots from the high south, where the soil is iron.</p>
          </div>
          <div className="material">
            <div className="material__head">
              <div className="material__name">Sandalwood</div>
              <div className="material__origin">Mysore</div>
            </div>
            <p className="material__body">Slow growth, narrow grain. Held for a generation.</p>
          </div>
        </div>
      </section>

      {/* THE JOURNAL */}
      <section className="ed" data-screen-label="01 Landing — journal" data-reveal>
        <div className="six__head">
          <span className="ed-eyebrow">The Journal</span>
          <h2 className="six__title">Notes from the atelier.</h2>
          <p className="six__intro">
            Written when there is something to say, never on a schedule.
          </p>
        </div>
        <div className="journal">
          {window.JOURNAL.map((j, i) => (
            <article key={i} className="journal__item">
              <image-slot
                id={`journal-${i}`}
                class="img-slot journal__hero"
                placeholder={`Hero photo for “${j.title}”`}
              ></image-slot>
              <span className="journal__eyebrow">{j.eyebrow}</span>
              <h3 className="journal__title">{j.title}</h3>
              <p className="journal__body">{j.body}</p>
              <div className="journal__meta">{j.date}</div>
              <span className="journal__read">Read →</span>
            </article>
          ))}
        </div>
      </section>

      {/* THE LETTER — dark accent moment */}
      <section className="surface-dark" data-screen-label="01 Landing — the letter">
        <div className="letter">
          <p className="letter__line">Some things are meant to be felt, not kept.</p>
          <span className="letter__attr">From the message that ends every reveal</span>
        </div>
      </section>

      {/* ATELIER */}
      <section className="ed" data-screen-label="01 Landing — atelier" data-reveal>
        <div className="atelier">
          <div>
            <span className="ed-eyebrow">The Atelier</span>
            <h2 className="atelier__title">Composed in Beirut and Grasse. Sealed by hand.</h2>
            <p className="atelier__body">
              The fragrances are blended in a small workshop in Mar Mikhael, in
              flacons made to a single design first drawn in 2024. Every box is
              sealed by the same two people.
            </p>
            <dl className="atelier__list" style={{marginTop: 40}}>
              <dt>Atelier</dt>
              <dd>Mar Mikhael<small>Beirut · Lebanon</small></dd>
              <dt>Composition</dt>
              <dd>Grasse<small>South of France · since 2024</small></dd>
              <dt>Visits</dt>
              <dd>By appointment<small>atelier@athar.house</small></dd>
              <dt>Editions</dt>
              <dd>Six per year<small>Numbered, never reprinted</small></dd>
            </dl>
          </div>
          <image-slot
            id="landing-atelier-hero"
            class="img-slot atelier__img"
            placeholder="Drop a photo of the atelier"
          ></image-slot>
        </div>

        {/* Stockists */}
        <div style={{ marginTop: 80 }}>
          <span className="ed-eyebrow">Stockists</span>
          <div className="stockists">
            <div className="stockist">
              <div className="stockist__city">Beirut</div>
              <div className="stockist__name">The Atelier</div>
              <div className="stockist__addr">Mar Mikhael, by appointment</div>
            </div>
            <div className="stockist">
              <div className="stockist__city">Paris</div>
              <div className="stockist__name">Marais Concept</div>
              <div className="stockist__addr">18 rue de Beauté, 75003</div>
            </div>
            <div className="stockist">
              <div className="stockist__city">London</div>
              <div className="stockist__name">Liberty · The Beauty Floor</div>
              <div className="stockist__addr">Regent Street, W1B</div>
            </div>
            <div className="stockist">
              <div className="stockist__city">Dubai</div>
              <div className="stockist__name">Sole DXB Editions</div>
              <div className="stockist__addr">Alserkal Avenue, Al Quoz</div>
            </div>
          </div>
        </div>
      </section>

      {/* CARE / SHIPPING / RETURNS */}
      <section data-screen-label="01 Landing — care">
        <div className="care">
          <div className="care__cell">
            <span className="care__head">Shipping</span>
            <div className="care__title">Worldwide, sealed by hand.</div>
            <p className="care__body">Ships within three working days from Beirut. Express delivery available.</p>
          </div>
          <div className="care__cell">
            <span className="care__head">Returns</span>
            <div className="care__title">Thirty days, by appointment.</div>
            <p className="care__body">Unopened flacons may be returned for full credit. Messages, once read, cannot.</p>
          </div>
          <div className="care__cell">
            <span className="care__head">Care</span>
            <div className="care__title">Kept away from light.</div>
            <p className="care__body">Store the flacon upright. Do not refrigerate. The atelier will refill the box only.</p>
          </div>
          <div className="care__cell">
            <span className="care__head">Concierge</span>
            <div className="care__title">Speak to a person.</div>
            <p className="care__body">Write to concierge@athar.house. We answer within a day, always in writing.</p>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="ed ed--narrow" data-screen-label="01 Landing — faq">
        <div className="faq__head">
          <span className="ed-eyebrow">Frequently Asked</span>
          <h2 className="faq__title">The questions we are asked the most.</h2>
        </div>
        <div className="faq">
          {window.FAQ.map((f, i) => (
            <div key={i} className="faq__row">
              <div className="faq__q">{f.q}</div>
              <div className="faq__a">{f.a}</div>
            </div>
          ))}
        </div>
      </section>

      {/* SUBSCRIBE */}
      <section data-screen-label="01 Landing — catalogue">
        <div className="subscribe">
          <div>
            <span className="ed-eyebrow">The Catalogue</span>
            <h3 className="subscribe__title">Receive the printed catalogue twice a year.</h3>
            <p className="subscribe__body">
              Sent in March and September. Notes from the perfumer, one
              photograph, and an envelope you can use for the message you
              haven't sent yet.
            </p>
          </div>
          <form className="subscribe__form" onSubmit={(e) => e.preventDefault()} noValidate>
            <input type="email" placeholder="Your email address" aria-label="Email address" />
            <button className="btn" type="submit">Subscribe</button>
          </form>
        </div>
      </section>

      {/* BEGIN */}
      <section data-screen-label="01 Landing — begin">
        <div className="begin">
          <span className="ed-eyebrow">Begin</span>
          <div className="begin__word">Choose your number.</div>
          <p className="begin__body">
            Six fragrances. One of them is the thing you have been trying to say.
          </p>
          <a className="btn" href="#/select">Choose a number</a>
        </div>
      </section>
    </React.Fragment>
  );
}

// ---------- PAGE 2: Number Selection ----------
function Select() {
  const order = window.PERFUME_ORDER;
  const onPick = (n) => {
    setSelectedNumber(n);
    navigate('/select/' + n);
  };
  return (
    <section className="select-wrap" data-screen-label="02 Select">
      <h1 className="select-wrap__title">Choose a number.</h1>
      <p className="select-wrap__sub">Each number carries a private declaration.</p>
      <div className="select-grid" role="list">
        {order.map((n) => {
          const p = window.PERFUMES[n];
          return (
            <button
              key={n}
              type="button"
              className="num-card"
              role="listitem"
              onClick={() => onPick(n)}
              aria-label={`Number ${n}, ${p.en}, ${p.mood}`}
            >
              <span className="num-card__bottle">
                <window.AtharBottle n={n} ariaLabel={`Flacon №${n}`} />
              </span>
              <span className="num-card__ar" lang="ar" dir="rtl">{p.ar}</span>
              <span className="num-card__mood">{p.mood}</span>
            </button>
          );
        })}
      </div>
    </section>
  );
}

// ---------- PAGE 3: Perfume Reveal ----------
function PerfumeReveal({ n }) {
  const p = window.PERFUMES[n];
  useEffect(() => { if (p) setSelectedNumber(n); }, [n]);
  if (!p) {
    return (
      <section className="select-wrap">
        <p className="select-wrap__sub">Number not found.</p>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <a className="btn" href="#/select">Return</a>
        </div>
      </section>
    );
  }
  return (
    <React.Fragment>
      <section className="reveal-page" data-screen-label={`03 Perfume ${n}`}>
        <div className="reveal-numeral-wrap">
          <div className="reveal-bottle">
            <window.AtharBottle n={n} ariaLabel={`Flacon №${n} — ${p.en}`} />
          </div>
        </div>
        <div className="reveal-info">
          <div className="reveal-info__ar" lang="ar" dir="rtl">{p.ar}</div>
          <div className="reveal-info__en">{p.en}</div>
          <hr className="rule rule--full" aria-hidden="true" />
          <div className="reveal-info__price-row">
            <div className="reveal-info__price">${p.price}</div>
            <div className="reveal-info__size">50 ml · Eau de Parfum</div>
          </div>
          <hr className="rule rule--full" aria-hidden="true" />
          <div className="reveal-info__label">Essence</div>
          <div className="reveal-info__text">{p.essence}</div>
          <div className="reveal-info__label">Message Theme</div>
          <div className="reveal-info__text">{p.theme}</div>
          <hr className="rule rule--full rule--40" aria-hidden="true" />
          <p className="reveal-info__mech">
            A card arrives inside the box. The recipient scans it. They have sixty seconds.
          </p>
          <a className="btn reveal-info__cta" href="#/checkout">Gift this number</a>
        </div>
      </section>

      <section className="perfume-lower" data-screen-label={`03 Perfume ${n} — details`}>
        <div className="perfume-block">
          <div className="perfume-block__label">Description</div>
          <p className="perfume-block__body">{p.description}</p>
        </div>

        <div className="perfume-block">
          <div className="perfume-block__label">Notes</div>
          <div className="notes">
            <div>
              <div className="note__head">Top</div>
              <div className="note__body">{p.notes.top}</div>
            </div>
            <div>
              <div className="note__head">Heart</div>
              <div className="note__body">{p.notes.heart}</div>
            </div>
            <div>
              <div className="note__head">Base</div>
              <div className="note__body">{p.notes.base}</div>
            </div>
          </div>
        </div>

        <div className="perfume-block">
          <div className="perfume-block__label">The Card</div>
          <div>
            <p className="card-preview__copy">
              A small card — no text, no instructions, only the wordmark and a
              barcode — arrives sealed inside the box. The recipient scans it
              with their phone. The message opens. They have sixty seconds.
            </p>
            <div className="mystery-card" role="img" aria-label="Mystery card preview">
              <div className="mystery-card__mark">Athar</div>
              <window.AtharQR seed={n} size={150} />
              <div className="mystery-card__num">№ {n}</div>
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

// ---------- PAGE 4: Checkout ----------
function Checkout() {
  const n = getSelectedNumber();
  const p = window.PERFUMES[n];
  const [form, setForm] = useState({
    recipient: '', address: '', city: '', country: '',
    sender: '', message: '',
  });
  const upd = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = (e) => {
    e.preventDefault();
    navigate('/confirmation');
  };
  return (
    <section className="checkout" data-screen-label="04 Checkout">
      <div className="checkout__chip">
        #{n} — <span lang="ar" dir="rtl">{p.ar}</span> · ${p.price}
      </div>
      <h1 className="checkout__heading">Complete your gift.</h1>

      <form onSubmit={submit} noValidate>
        <label className="field__label" htmlFor="f-recipient">Recipient Name</label>
        <input id="f-recipient" type="text" value={form.recipient} onChange={upd('recipient')} autoComplete="name" />

        <label className="field__label" htmlFor="f-address">Delivery Address</label>
        <input id="f-address" type="text" value={form.address} onChange={upd('address')} autoComplete="street-address" />

        <label className="field__label" htmlFor="f-city">City</label>
        <input id="f-city" type="text" value={form.city} onChange={upd('city')} autoComplete="address-level2" />

        <label className="field__label" htmlFor="f-country">Country</label>
        <input id="f-country" type="text" value={form.country} onChange={upd('country')} autoComplete="country-name" />

        <label className="field__label" htmlFor="f-sender">Your Name</label>
        <input id="f-sender" type="text" value={form.sender} onChange={upd('sender')} autoComplete="name" />

        <label className="field__label" htmlFor="f-message">Personal Message (optional)</label>
        <textarea
          id="f-message"
          rows="4"
          value={form.message}
          onChange={upd('message')}
          placeholder="Leave empty to use the signature message for this number"
        />

        <div className="checkout__submit">
          <button className="btn btn--full" type="submit">Complete your gift</button>
        </div>
      </form>
    </section>
  );
}

// ---------- PAGE 5: Confirmation ----------
function Confirmation() {
  const n = getSelectedNumber();
  return (
    <section className="confirm" data-screen-label="05 Confirmation">
      <div className="confirm__num">{n}</div>
      <h1 className="confirm__h">Your gift is on its way.</h1>
      <hr className="rule rule--wide" aria-hidden="true" />
      <p className="confirm__body">
        A card bearing a barcode will arrive inside the box. When they scan it,
        a private page will open. They will have sixty seconds. Then the message
        is gone forever.
      </p>

      <div className="confirm__card-wrap" aria-label="Card preview">
        <div className="confirm__card-label">What they will receive</div>
        <div className="mystery-card" role="img" aria-label="Mystery card preview">
          <div className="mystery-card__mark">Athar</div>
          <window.AtharQR seed={n} size={150} />
          <div className="mystery-card__num">№ {n}</div>
        </div>
      </div>

      <div className="confirm__foot">A confirmation has been sent to your email.</div>
    </section>
  );
}

window.Landing = Landing;
window.Select = Select;
window.PerfumeReveal = PerfumeReveal;
window.Checkout = Checkout;
window.Confirmation = Confirmation;
