/* eslint-disable */
// MEMBERSHIPS / OFFERS PAGE

const PB_M = window.PB_DATA;

function PageMemberships() {
  return (
    <div data-screen-label="Memberships">
      <section className="page-head shell-wide">
        <div className="crumbs"><a href="#/">Home</a><span className="sep">/</span>Memberships</div>
        <h1>The <em>regular</em><br />life.</h1>
        <p className="sub">
          A salon you book once and visit a hundred times. The Emirates Platinum offer is live now —
          longer-term packages are in private preview for our highest-frequency clients.
        </p>
      </section>

      {/* Hero offer */}
      <section className="shell-wide section">
        <div className="offer">
          <div className="copy">
            <span className="stamp">Live · to 31 May 2026</span>
            <h2 className="h">Emirates <em>Platinum</em><br />Cardholder Offer</h2>
            <p className="body">
              Hand-picked treatments at 30% off — plus 25% off the full menu, year-round, for
              Emirates Platinum cardholders. Extends to up to five guests in your party.
            </p>
            <p className="terms">
              · Reservations required<br />
              · Mention the offer when booking<br />
              · Present your card on arrival<br />
              · Cannot be combined with other promotions
            </p>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#/book" className="btn btn-accent btn-arrow">Book the offer</a>
              <a href={PB_M.brand.whatsappHref} target="_blank" rel="noopener" className="btn btn-ghost" style={{ color: 'var(--ivory)', borderColor: 'rgba(246,244,239,0.4)' }}>Verify eligibility</a>
            </div>
          </div>
          <div className="art">
            <img src="media/hair-highlights-1.webp" alt="" />
            <div className="badge">
              <div className="pct">30%</div>
              <div className="lbl">Off · Selected</div>
            </div>
          </div>
        </div>
      </section>

      {/* Tiered packages */}
      <section className="shell-wide section">
        <div className="sig-head" style={{ marginBottom: 56 }}>
          <div>
            <Eyebrow>In preview</Eyebrow>
            <h2 className="display-2" style={{ marginTop: 18 }}>Packages built<br/>around a <em>routine</em>.</h2>
          </div>
          <div>
            <p className="lede">
              Concept tiers — not yet live. Confirm with the team and we’ll tailor the right
              combination for your colour cycle and skin programme.
            </p>
          </div>
        </div>

        <div className="tier-grid">
          <div className="tier">
            <div className="nm">Essentials</div>
            <div className="pr">AED 1,490<small>per quarter</small></div>
            <div className="desc">For the every-six-weeks visitor — root colour, blow-dry and a manicure cycle.</div>
            <ul>
              <li>Roots Colour, twice</li>
              <li>Two signature blow-dries</li>
              <li>Two classic manicures</li>
              <li>Complimentary consultation</li>
              <li>10% off any add-on service</li>
            </ul>
            <div className="cta"><a href="#/contact" className="btn btn-ghost">Enquire</a></div>
          </div>

          <div className="tier is-feature">
            <div className="nm">Signature</div>
            <div className="pr">AED 3,950<small>per quarter</small></div>
            <div className="desc">For the colour-led regular — Airtouch maintenance, facial cosmetology and nails.</div>
            <ul>
              <li>One Airtouch refresh</li>
              <li>One toner + treatment</li>
              <li>Three signature facials</li>
              <li>Three Japanese manicures</li>
              <li>15% off any add-on service</li>
              <li>Priority booking</li>
            </ul>
            <div className="cta"><a href="#/contact" className="btn btn-accent">Enquire</a></div>
          </div>

          <div className="tier">
            <div className="nm">Couture</div>
            <div className="pr">On consultation<small>annual programme</small></div>
            <div className="desc">A bespoke yearly programme co-designed with your senior stylist and cosmetologist.</div>
            <ul>
              <li>Annual colour map</li>
              <li>Custom facial protocol</li>
              <li>Dedicated chair</li>
              <li>Bridal & event readiness</li>
              <li>Concierge scheduling</li>
              <li>House discount on à la carte</li>
            </ul>
            <div className="cta"><a href="#/contact" className="btn btn-ghost">Speak with us</a></div>
          </div>
        </div>

        <div style={{ marginTop: 32, fontSize: 12, color: 'var(--ink-faint)', letterSpacing: '0.06em' }}>
          * Concept pricing. Final packages confirmed at consultation; first cohort opening 2026.
        </div>
      </section>

      {/* Additional perks */}
      <section className="shell-wide section-tight">
        <div className="sig-head" style={{ marginBottom: 56 }}>
          <div>
            <Eyebrow>Always on</Eyebrow>
            <h2 className="display-2" style={{ marginTop: 18 }}>House <em>standards</em>.</h2>
          </div>
          <div>
            <p className="lede">Small things, always included.</p>
          </div>
        </div>
        <div className="pillars">
          <div className="pillar">
            <div className="num">+</div>
            <div className="title">Complimentary consultation</div>
            <p className="body">Twenty minutes with your stylist before any colour, treatment or cut.</p>
          </div>
          <div className="pillar">
            <div className="num">+</div>
            <div className="title">First perm session — 20% off</div>
            <p className="body">A standing offer for clients trying our Permanent Curly Perm service.</p>
          </div>
          <div className="pillar">
            <div className="num">+</div>
            <div className="title">Refer a friend</div>
            <p className="body">Both you and your guest receive a service credit on her first visit.</p>
          </div>
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

Object.assign(window, { PageMemberships });