/* eslint-disable */
// ABOUT PAGE

const PB_A = window.PB_DATA;

function PageAbout() {
  return (
    <div data-screen-label="About">
      <section className="page-head shell-wide">
        <div className="crumbs"><a href="#/">Home</a><span className="sep">/</span>About</div>
        <h1>The <em>house</em><br />on the ground floor.</h1>
        <p className="sub">
          A women-only luxury cosmetology salon, set inside Emirates Financial Tower in DIFC.
          Hair, colour, skin, nails and aesthetics — by a small team of specialists who are
          named by their clients.
        </p>
      </section>

      <section className="shell-wide">
        <div className="about-philo">
          <div className="img-stack">
            <div className="a"><img src="media/fresha-gallery-1.webp" alt="Salon interior" /></div>
            <div className="b"><img src="media/fresha-gallery-2.webp" alt="Salon workstation" /></div>
          </div>
          <div className="copy">
            <Eyebrow>Philosophy</Eyebrow>
            <h2 style={{ marginTop: 20 }}>Quiet luxury, <em>quietly</em><br />practised.</h2>
            <p>
              We chose DIFC because the women who work here move at speed, want their time
              respected, and recognise quality when they see it. The salon was built for that
              standard. A small footprint, a curated menu, and specialists who care more about
              your return visit than your first one.
            </p>
            <p>
              Every appointment opens with a complimentary consultation. We won’t suggest a
              service we don’t think suits you, and we’ll be specific about what we can and
              cannot do — Airtouch, Balayage, Buccal Cosmetology, Salmon-DNA, Japanese
              manicure, Gua Sha — these are the treatments we are known for.
            </p>
            <div style={{ marginTop: 32 }}>
              <a href="#/services" className="btn btn-link">See the menu</a>
            </div>
          </div>
        </div>
      </section>

      {/* Three principles */}
      <section className="shell-wide">
        <div className="pillars">
          <div className="pillar">
            <div className="num">I.</div>
            <div className="title">Precision</div>
            <p className="body">
              Colour is mixed in front of you. Cuts are dry-finished and checked at the
              mirror. We don’t cut to a template — we cut to your hair, your face, your week.
            </p>
          </div>
          <div className="pillar">
            <div className="num">II.</div>
            <div className="title">Personalization</div>
            <p className="body">
              Named stylists. Returning clients. Notes kept between visits. The reason our
              reviews mention our team by name — Anastasia, Joanne, Rema — is because they
              are the relationship.
            </p>
          </div>
          <div className="pillar">
            <div className="num">III.</div>
            <div className="title">Luxury &amp; Comfort</div>
            <p className="body">
              Women-only by design. Refined materials, quiet rooms, light food and tea.
              An hour here should be the best hour of your week.
            </p>
          </div>
        </div>
      </section>

      {/* Full team grid */}
      <section className="shell-wide section">
        <div className="sig-head" style={{ marginBottom: 56 }}>
          <div>
            <Eyebrow>The team</Eyebrow>
            <h2 className="display-2" style={{ marginTop: 18 }}>Specialists,<br /><em>not</em> generalists.</h2>
          </div>
          <div>
            <p className="lede">
              Eight named specialists across hair, nails, lashes, massage and cosmetology.
              Ratings from our live Fresha profile, verified May 2026.
            </p>
            <a href={PB_A.brand.fresha} target="_blank" rel="noopener" className="btn btn-link" style={{ marginTop: 20 }}>View Fresha profile ↗</a>
          </div>
        </div>

        <div className="team-full-grid">
          {PB_A.teamFull.map((m) => (
            <div key={m.id} className="team-card">
              <div className="photo">
                {m.img ? <img src={m.img} alt={m.name} /> : (
                  <div style={{ width: '100%', height: '100%', display: 'grid', placeItems: 'center', background: 'var(--silver-light)', color: 'var(--ink-faint)', fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 64 }}>{m.name[0]}</div>
                )}
              </div>
              <div className="info">
                <div className="nm">{m.name}</div>
                <div className="rl">{m.role}</div>
                <div className="rt">★ {m.rating.toFixed(1)} · Fresha</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 16, fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.08em' }}>
          Headshots pending for Remalyn and Nilpe — full team available on Fresha.
        </div>
      </section>

      <FinalCTA />
    </div>
  );
}

Object.assign(window, { PageAbout });