/* eslint-disable */
// HOME PAGE

const PB_H = window.PB_DATA;

function HeroSplit() {
  return (
    <section className="hero shell-wide">
      <div className="hero-grid">
        <div className="hero-copy">
          <div className="hero-tag">
            <span className="line" />
            <span className="small-caps" style={{ color: 'var(--ink-muted)' }}>DIFC · Emirates Financial Tower</span>
          </div>
          <h1 className="hero-h1">
            Your look<br />
            <em>deserves</em><br />
            better.
          </h1>
          <p className="hero-sub">
            Hair, colour, skin, nails &amp; aesthetics by certified specialists — in Emirates
            Financial Tower. We don’t just colour; we craft light.
          </p>
          <div className="hero-cta-row">
            <a href="#/book" className="btn btn-primary btn-arrow">Book an appointment</a>
            <a href={PB_H.brand.whatsappHref} target="_blank" rel="noopener" className="btn btn-ghost">WhatsApp a stylist</a>
          </div>
          <dl className="hero-meta">
            <div>
              <dt>Rating</dt>
              <dd>4.9 <small>From 249 Fresha reviews</small></dd>
            </div>
            <div>
              <dt>Location</dt>
              <dd>DIFC <small>Emirates Financial Tower, GF</small></dd>
            </div>
            <div>
              <dt>Open</dt>
              <dd>10 — 21 <small>Seven days a week</small></dd>
            </div>
          </dl>
        </div>
        <div className="hero-art">
          <img src="media/hair-women-4.webp" alt="Editorial portrait of styled hair" />
          <div className="hero-art-stamp">
            <span className="x">SIGNATURE</span>
            <span className="y">Airtouch · Balayage</span>
          </div>
          <div className="hero-art-rating">
            <div className="num">4.9</div>
            <div className="stars">★★★★★</div>
            <div className="src">Fresha · 249</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroBleed() {
  return (
    <section className="hero-bleed">
      <img src="media/hair-women-1.webp" alt="Salon hero" />
      <div className="hero-bleed-inner shell-wide">
        <div className="hero-tag">
          <span className="line" style={{ background: 'rgba(246,244,239,0.5)' }} />
          <span className="small-caps">DIFC · Emirates Financial Tower</span>
        </div>
        <h1 className="hero-h1" style={{ maxWidth: '14ch' }}>
          Your look<br /><em>deserves</em> better.
        </h1>
        <p className="hero-sub" style={{ color: 'rgba(246,244,239,0.85)' }}>
          DIFC’s destination for luxury beauty — hair, colour, skin, nails &amp; aesthetics by certified specialists.
        </p>
        <div className="hero-cta-row">
          <a href="#/book" className="btn btn-primary btn-arrow">Book an appointment</a>
          <a href={PB_H.brand.whatsappHref} target="_blank" rel="noopener" className="btn btn-ghost">WhatsApp a stylist</a>
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [
    { ic: '★', lbl: 'Verified rating', val: '4.9 / 249 · Fresha' },
    { ic: '◐', lbl: 'Location', val: 'DIFC · Emirates Financial Tower' },
    { ic: '✦', lbl: 'Specialists', val: 'Certified colourists & cosmetologists' },
    { ic: '◇', lbl: 'Consultation', val: 'Complimentary, with every booking' },
  ];
  return (
    <section className="trust shell-wide">
      <div className="trust-row">
        {items.map((i) => (
          <div key={i.lbl} className="trust-item">
            <div className="ic">{i.ic}</div>
            <div>
              <div className="lbl">{i.lbl}</div>
              <div className="val">{i.val}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function SignatureGrid() {
  return (
    <section className="section shell-wide">
      <div className="sig-head">
        <div>
          <Eyebrow>Signature services</Eyebrow>
          <h2 className="display-2" style={{ marginTop: 18 }}>
            The work we’re <em>known</em> for.
          </h2>
        </div>
        <div>
          <p className="lede">
            Six treatments that define the house: editorial colour, transformative facial
            cosmetology, and the small luxuries that bring clients back for years.
          </p>
          <a href="#/services" className="btn btn-link" style={{ marginTop: 20 }}>See full menu</a>
        </div>
      </div>
      <div className="sig-grid">
        {PB_H.signature.map((s) => (
          <article key={s.n} className="sig-card">
            <div className="img"><img src={s.img} alt={s.name} /></div>
            <div className="num">— {s.n} / 06</div>
            <h3 className="name">{s.name}</h3>
            <p className="desc">{s.desc}</p>
            <div className="meta">
              <span style={{ color: 'var(--ink-faint)', letterSpacing: '0.14em', textTransform: 'uppercase', fontSize: 11 }}>{s.dur}</span>
              <span className="price">{s.price}</span>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function Pillars() {
  const items = [
    { n: 'I.',  t: 'Precision',     b: 'Custom-blended colour, precision cuts, and treatments quoted to your hair and skin — not from a template.' },
    { n: 'II.', t: 'Personalization', b: 'Every appointment opens with a complimentary consultation. Named stylists, returning clients, no rotation.' },
    { n: 'III.', t: 'Quiet Luxury', b: 'A women-only sanctuary in DIFC. Refined, considered, confident. The opposite of loud.' },
  ];
  return (
    <section className="shell-wide">
      <div className="pillars">
        {items.map((p) => (
          <div key={p.t} className="pillar">
            <div className="num">{p.n}</div>
            <div className="title">{p.t}</div>
            <p className="body">{p.b}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function TeamPreview() {
  return (
    <section className="section shell-wide">
      <div className="sig-head" style={{ marginBottom: 56 }}>
        <div>
          <Eyebrow>The team</Eyebrow>
          <h2 className="display-2" style={{ marginTop: 18 }}>
            Stylists you <em>return</em> for.
          </h2>
        </div>
        <div>
          <p className="lede">
            Our regulars name their stylists in their reviews. Hair, nails, lashes, massage and
            cosmetology — every chair held by a specialist with a track record.
          </p>
          <a href="#/about" className="btn btn-link" style={{ marginTop: 20 }}>Meet everyone</a>
        </div>
      </div>
      <div className="team-strip">
        {PB_H.team.map((m) => (
          <div key={m.id} className="team-card">
            <div className="photo"><img src={m.img} alt={m.name} /></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>
    </section>
  );
}

function OfferTeaser() {
  return (
    <section className="shell-wide section-tight">
      <div className="offer">
        <div className="copy">
          <span className="stamp">Limited · to 31 May 2026</span>
          <h2 className="h">
            Emirates <em>Platinum</em><br />Cardholder Offer
          </h2>
          <p className="body">
            30% off selected services and 25% off year-round for Emirates Platinum cardholders —
            extended to up to five guests in your party.
          </p>
          <p className="terms">
            Reservations required. Mention the offer at booking and present your card on arrival.
            Cannot be combined with other promotions.
          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 12 }}>
            <a href="#/memberships" className="btn btn-accent btn-arrow">View offer terms</a>
            <a href="#/book" className="btn btn-ghost" style={{ color: 'var(--ivory)', borderColor: 'rgba(246,244,239,0.4)' }}>Book the offer</a>
          </div>
        </div>
        <div className="art">
          <img src="media/hair-highlights-2.webp" alt="" />
          <div className="badge">
            <div className="pct">30%</div>
            <div className="lbl">Off · Selected</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ReviewsRow() {
  return (
    <section className="section shell-wide">
      <div className="sig-head" style={{ marginBottom: 48 }}>
        <div>
          <Eyebrow>What clients say</Eyebrow>
          <h2 className="display-2" style={{ marginTop: 18 }}>
            Real reviews,<br /><em>dated this week.</em>
          </h2>
        </div>
        <div>
          <p className="lede">
            Pulled directly from our Fresha profile — no curated testimonials, no marketing copy.
            See every review in chronological order.
          </p>
          <a href="#/reviews" className="btn btn-link" style={{ marginTop: 20 }}>All 249 reviews</a>
        </div>
      </div>
      <div className="review-grid">
        {PB_H.reviews.map((r) => (
          <article key={r.name} className="review-card">
            <div className="stars">★★★★★</div>
            <div className="body">“{r.body}”</div>
            <div className="footer">
              <div className="avatar">{r.initial}</div>
              <div className="who">
                <div className="nm">{r.name}</div>
                <div className="dt">{r.date} · {r.service}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

function GalleryStrip() {
  return (
    <section className="shell-wide section-tight">
      <div className="gallery-strip">
        {PB_H.gallery.map((g, i) => (
          <a key={i} href="#/about" title={g.label}>
            <img src={g.src} alt={g.label} />
          </a>
        ))}
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="finalcta shell-wide">
      <Eyebrow>Reserve a chair</Eyebrow>
      <h2>
        We’re ready when <em>you</em> are.
      </h2>
      <p className="lede" style={{ margin: '32px auto 0', textAlign: 'center' }}>
        Book online in under sixty seconds — or send a stylist a note on WhatsApp.
        Complimentary consultation with every appointment.
      </p>
      <div className="row">
        <a href="#/book" className="btn btn-primary btn-arrow">Book an appointment</a>
        <a href={PB_H.brand.whatsappHref} target="_blank" rel="noopener" className="btn btn-ghost">WhatsApp a stylist</a>
      </div>
    </section>
  );
}

function PageHome({ heroVariant }) {
  return (
    <div data-screen-label="Home">
      {heroVariant === 'bleed' ? <HeroBleed /> : <HeroSplit />}
      <TrustStrip />
      <SignatureGrid />
      <Pillars />
      <TeamPreview />
      <OfferTeaser />
      <ReviewsRow />
      <GalleryStrip />
      <FinalCTA />
    </div>
  );
}

Object.assign(window, { PageHome });