/* global React, Icon */
const { useState: useStateT } = React;

/* ========================================================
   TREATMENTS PAGE
   ======================================================== */

const TREATMENT_CATS = [
  {
    id: 'aesthetic', label: 'Aesthetic Clinic',
    blurb: 'Cosmetology, injectables and dermatology-led skin work — consultation-led only. Specific products, doses and clinical outcomes confirmed at consultation and DHA-compliant.',
    img: 'media/images/clinic-02-serene-treatment-room-1.webp',
    items: [
      { name: 'Aesthetic consultation', desc: 'Diagnostic conversation with our medical lead before any procedure.', price: 'Complimentary', flag: false },
      { name: 'Injectables — anti-wrinkle', desc: 'Category service · doctor-administered · confirmed at consultation.', price: 'See on Fresha', flag: true },
      { name: 'Injectables — dermal filler', desc: 'Category service · doctor-administered · confirmed at consultation.', price: 'See on Fresha', flag: true },
      { name: 'Cosmetology — advanced facial', desc: 'Multi-step technical treatment using clinical-grade actives.', price: 'See on Fresha', flag: true },
      { name: 'Mesotherapy', desc: 'Micro-infusion treatment, scalp and skin protocols.', price: 'See on Fresha', flag: true },
    ],
  },
  {
    id: 'skin', label: 'Skin & Facials',
    blurb: 'Signature facials and expert skincare protocols. Bespoke to your skin diagnostic.',
    img: 'media/images/clinic-05-tranquil-room.webp',
    items: [
      { name: 'Buro signature facial', desc: 'Diagnostic, deep cleanse, treatment serums and lift massage.', price: 'from AED 450*', flag: false },
      { name: 'Hydrating facial', desc: 'Layered hydration for tired, dehydrated skin.', price: 'from AED 380*', flag: false },
      { name: 'Brightening facial', desc: 'Targets pigmentation and uneven tone.', price: 'from AED 420*', flag: false },
      { name: 'Express glow', desc: '30-minute boost — perfect before an event.', price: 'from AED 220*', flag: false },
      { name: 'Men\'s facial', desc: 'Calibrated for shave-irritation and oilier skin.', price: 'from AED 380*', flag: false },
    ],
  },
  {
    id: 'body', label: 'Body & Massage',
    blurb: 'Therapeutic and Japanese-inspired bodywork — plus our four- and six-hand signatures.',
    img: 'media/images/clinic-08-serene-spa-table.webp',
    items: [
      { name: '6-hand signature ritual', desc: 'Three therapists, ninety minutes of perfect symmetry — the standout.', price: 'from AED 1,500*', flag: false, star: true },
      { name: '4-hand signature ritual', desc: 'Two therapists in synchronised relaxation.', price: 'from AED 950*', flag: false, star: true },
      { name: 'Deep tissue massage', desc: 'Therapeutic pressure for chronic tension.', price: 'from AED 480*', flag: false },
      { name: 'Japanese-inspired massage', desc: 'Stretching, pressure points, restorative flow.', price: 'from AED 520*', flag: false },
      { name: 'Aromatherapy massage', desc: 'Soft pressure with botanically tuned oils.', price: 'from AED 450*', flag: false },
    ],
  },
  {
    id: 'hair', label: 'Hair',
    blurb: 'Cutting, colour, treatments and styling — eighty bookable services across our salon suite.',
    img: 'media/images/salon-01-serene-salon-space.webp',
    items: [
      { name: 'Cut & finish', desc: 'Consultation, wash, precision cut and blow.', price: 'from AED 250*', flag: false },
      { name: 'Colour & gloss', desc: 'Single-process colour with conditioning gloss.', price: 'from AED 480*', flag: false },
      { name: 'Highlights & balayage', desc: 'Hand-painted colour work.', price: 'from AED 850*', flag: false },
      { name: 'Keratin treatment', desc: 'Smoothing and reparative protocol.', price: 'from AED 950*', flag: false },
      { name: 'Blow-dry & style', desc: 'Wash, blow and finish for the day or evening.', price: 'from AED 180*', flag: false },
    ],
  },
  {
    id: 'nails', label: 'Nails',
    blurb: 'Manicures, pedicures and gel work in the quiet nail bar.',
    img: 'media/images/salon-08-luxurious-makeup-station.webp',
    items: [
      { name: 'Classic manicure', desc: 'Shape, cuticle, polish.', price: 'from AED 120*', flag: false },
      { name: 'Gel manicure', desc: 'Long-wear gel application.', price: 'from AED 180*', flag: false },
      { name: 'Classic pedicure', desc: 'Foot soak, exfoliation and polish.', price: 'from AED 180*', flag: false },
      { name: 'Spa pedicure', desc: 'Extended ritual with masque and massage.', price: 'from AED 260*', flag: false },
    ],
  },
  {
    id: 'makeup', label: 'Makeup',
    blurb: 'Event, occasion and bridal makeup at our vanity-lit glamour stations.',
    img: 'media/images/salon-10-glamorous-mirrors.webp',
    items: [
      { name: 'Event makeup', desc: 'Full application for an evening or occasion.', price: 'from AED 380*', flag: false },
      { name: 'Bridal trial', desc: 'Consultation and rehearsal application.', price: 'from AED 480*', flag: false },
      { name: 'Bridal day of', desc: 'Full bridal application on the day.', price: 'from AED 1,200*', flag: false },
      { name: 'Lash & brow shape', desc: 'Tint, shape and finish.', price: 'from AED 180*', flag: false },
    ],
  },
];

function TreatmentsPage({ openBooking }) {
  const [active, setActive] = useStateT('aesthetic');
  const cat = TREATMENT_CATS.find(c => c.id === active);

  return (
    <div data-screen-label="02 Treatments">
      <section className="page-hero">
        <div className="container-wide">
          <div className="eyebrow">The Menu · 136 Services</div>
          <h1>From facials to a six-hand ritual.</h1>
          <p>
            A category-led menu, presented in plain language. Pricing band verified to <b>AED 80 – AED 1,500</b>; itemised prices marked with * are indicative pending live Fresha sync.
          </p>
        </div>
      </section>

      <div className="treat-tabs">
        <div className="container-wide" style={{display:'flex'}}>
          {TREATMENT_CATS.map(c => (
            <button key={c.id} className={"treat-tab " + (active === c.id ? 'active' : '')} onClick={() => setActive(c.id)}>
              {c.label}
            </button>
          ))}
        </div>
      </div>

      <section className="container-wide" style={{paddingBottom: 96}}>
        <div className="treat-section-head">
          <div>
            <div className="eyebrow">{cat.label}</div>
            <h2 style={{marginTop:12}}>{cat.label}</h2>
          </div>
          <div className="meta">{cat.blurb}</div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 320px', gap:48, alignItems:'flex-start'}} className="treat-layout">
          <div>
            {cat.items.map((it, i) => (
              <div key={i} className={"treat-row " + (it.flag ? 'flag' : '')}>
                <span className="num">{String(i+1).padStart(2, '0')}</span>
                <div>
                  <div className="name" style={{display:'flex', alignItems:'center', gap:10}}>
                    <span dangerouslySetInnerHTML={{__html: it.name}}/>
                    {it.star && <span style={{color:'var(--champagne)'}}><Icon.Star /></span>}
                  </div>
                  <div className="desc">{it.desc}</div>
                </div>
                <div className="price">
                  {it.price.startsWith('from') ? (
                    <><small>From</small>{it.price.replace('from ', '')}</>
                  ) : it.price === 'Complimentary' ? (
                    <span style={{color:'var(--champagne-deep)'}}>{it.price}</span>
                  ) : (
                    <span style={{fontFamily:'var(--sans)', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'rgba(42,36,31,0.5)'}}>{it.price}</span>
                  )}
                </div>
                <button className="book" onClick={openBooking}>Book →</button>
              </div>
            ))}

            <div style={{marginTop:32, padding: '24px 0', borderTop:'1px solid var(--line-soft)', fontSize:12, color:'rgba(42,36,31,0.5)', fontStyle:'italic', display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:16}}>
              <span>*Indicative — verified band AED 80–1,500. Live pricing on Fresha until on-site booking launches.</span>
              <a href="https://www.fresha.com/a/buro-beauty-clinic-dubai-address-montgomerie-uvl6e8qf" target="_blank" rel="noopener" style={{borderBottom:'1px solid', color:'var(--espresso)', fontStyle:'normal'}}>
                Full menu on Fresha ↗
              </a>
            </div>
          </div>

          <aside style={{position:'sticky', top: 160}} className="treat-aside">
            <div className="plate" style={{aspectRatio:'3/4'}}>
              <img src={cat.img} alt={cat.label}/>
            </div>
            <div style={{background:'var(--cream-card)', padding:24, marginTop:0, borderBottom:'1px solid var(--line)'}}>
              <div className="eyebrow eyebrow-quiet">Concierge</div>
              <div style={{fontFamily:'var(--display)', fontSize:22, marginTop:8, lineHeight:1.2}}>Unsure where to begin?</div>
              <p style={{fontSize:13, color:'rgba(42,36,31,0.65)', marginTop:8, lineHeight:1.5}}>
                Our front-of-house team will guide you to the right ritual — in person, by phone or WhatsApp.
              </p>
              <div style={{display:'flex', flexDirection:'column', gap:8, marginTop:16}}>
                <button className="btn btn-primary btn-sm" onClick={openBooking}>Reserve</button>
                <a className="btn btn-ghost btn-sm" href="https://wa.me/971566157135" target="_blank" rel="noopener">
                  <Icon.Whatsapp size={14}/> WhatsApp
                </a>
              </div>
            </div>
          </aside>
        </div>
      </section>

      <style>{`
        @media (max-width: 960px) {
          .treat-layout { grid-template-columns: 1fr !important; }
          .treat-aside { position: static !important; }
        }
      `}</style>
    </div>
  );
}

/* ========================================================
   SIGNATURE PAGE — 4/6-hand spotlight
   ======================================================== */
function SignaturePage({ openBooking }) {
  return (
    <div data-screen-label="03 Signature">
      <section className="page-hero">
        <div className="container-wide">
          <div className="eyebrow">The Differentiator</div>
          <h1><em style={{fontStyle:'italic'}}>Symmetry</em> as a treatment.</h1>
          <p>
            Most clinics use one therapist. We use two — or three. The 4-hand and 6-hand rituals are Buro's signature: a treatment so synchronised, so enveloping, it has become the reason guests return.
          </p>
        </div>
      </section>

      <section className="section container-wide">
        <div style={{display:'grid', gridTemplateColumns:'5fr 7fr', gap:64, alignItems:'flex-start'}} className="sig-layout">
          <div style={{position:'sticky', top: 120}}>
            <div className="plate" style={{aspectRatio:'4/5'}}>
              <img src="media/images/clinic-10-serene-treatment-room-4.webp" alt="Treatment room"/>
            </div>
            <div className="cap" style={{marginTop:14}}>The 6-hand ritual room · Buro Clinic</div>
          </div>

          <div style={{display:'flex', flexDirection:'column', gap:64}}>
            <div>
              <div className="eyebrow">How it works</div>
              <h2 style={{marginTop:12, maxWidth:'16ch'}}>Two — or three — therapists. One body. Total surrender.</h2>
              <p style={{marginTop:24, fontSize:16, color:'rgba(42,36,31,0.7)', maxWidth:'50ch', lineHeight:1.7}}>
                The brain can't track multiple touch points at once. When two therapists work in mirror across your shoulders and feet, or three across your back, arms and crown, the sensory system gives in within minutes. Tension you'd normally hold for ninety minutes is gone in twenty. The remainder is pure release.
              </p>
            </div>

            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
              <RitualCard
                title="Four-Hand Ritual"
                duration="60 minutes · 2 therapists"
                price="from AED 950*"
                bullets={['Synchronised mirror technique','Aromatherapy or deep-tissue base','Diagnostic intake before the room','Champagne or herbal infusion to close']}
                openBooking={openBooking}
              />
              <RitualCard
                title="Six-Hand Ritual"
                duration="90 minutes · 3 therapists"
                price="from AED 1,500*"
                bullets={['Three-point synchronised choreography','Includes scalp, face &amp; foot work','Private suite with golf-course outlook','Complimentary café service afterwards']}
                openBooking={openBooking}
                featured
              />
            </div>

            <div>
              <div className="eyebrow">The choreography</div>
              <h3 style={{marginTop:12}}>A ninety-minute score, in three movements.</h3>
              <div style={{display:'grid', gridTemplateColumns:'auto 1fr', gap:'20px 32px', marginTop:32, alignItems:'flex-start'}}>
                <MoveRow num="I" title="The Arrival" body="A diagnostic moment with the lead therapist — pressure preferences, areas of holding, aromatic selection from five botanical blends." />
                <MoveRow num="II" title="The Symmetry" body="Three therapists begin in unison across the back, shoulders and feet. The mind, unable to track, lets go." />
                <MoveRow num="III" title="The Stillness" body="A scalp release closes the session. You're escorted to the café terrace for a restorative tea." />
              </div>
            </div>

            <div style={{background:'var(--espresso)', color:'var(--ivory)', padding: 48}}>
              <div className="eyebrow" style={{color:'var(--champagne)'}}>Reserve</div>
              <h3 style={{color:'var(--ivory)', marginTop:12}}>Available by request, six days a week.</h3>
              <p style={{marginTop:16, color:'rgba(247,242,234,0.75)', maxWidth:'48ch'}}>
                Six-hand rooms are limited — we recommend reserving at least 72 hours ahead. Our concierge will arrange therapists, robes and the post-ritual café table.
              </p>
              <div style={{marginTop:24, display:'flex', gap:12, flexWrap:'wrap'}}>
                <button className="btn btn-gold" onClick={openBooking}>Reserve the ritual <Icon.Arrow /></button>
                <a className="btn btn-secondary" href="https://wa.me/971566157135" target="_blank" rel="noopener" style={{color:'var(--ivory)', borderColor:'rgba(247,242,234,0.5)'}}>
                  <Icon.Whatsapp size={14}/> Speak to concierge
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 960px) {
          .sig-layout { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

function RitualCard({ title, duration, price, bullets, openBooking, featured }) {
  return (
    <div style={{
      padding: 32,
      border: '1px solid ' + (featured ? 'var(--espresso)' : 'var(--line)'),
      background: featured ? 'var(--cream-card)' : 'transparent',
      position: 'relative',
    }}>
      {featured && (
        <div style={{
          position:'absolute', top:-12, right:24,
          background:'var(--champagne)', color:'var(--espresso)',
          padding:'4px 10px', fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', fontWeight:700
        }}>The signature</div>
      )}
      <h3 style={{fontSize:28}}>{title}</h3>
      <div className="eyebrow eyebrow-quiet" style={{marginTop:8, color:'rgba(42,36,31,0.55)'}}>{duration}</div>
      <div style={{fontFamily:'var(--display)', fontSize:32, marginTop:16}}>{price}</div>
      <hr className="rule" style={{margin:'20px 0'}}/>
      <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:10, fontSize:14}}>
        {bullets.map((b, i) => (
          <li key={i} style={{display:'flex', gap:10, alignItems:'flex-start'}}>
            <span style={{color:'var(--champagne)', marginTop:6}}>·</span>
            <span dangerouslySetInnerHTML={{__html: b}}/>
          </li>
        ))}
      </ul>
      <button className={"btn " + (featured ? 'btn-primary' : 'btn-ghost')} onClick={openBooking} style={{width:'100%', marginTop:24}}>
        Reserve
      </button>
    </div>
  );
}

function MoveRow({ num, title, body }) {
  return (
    <React.Fragment>
      <div style={{fontFamily:'var(--display)', fontStyle:'italic', fontSize:32, color:'var(--champagne-deep)', lineHeight:1, minWidth:48}}>{num}.</div>
      <div>
        <h4>{title}</h4>
        <p style={{marginTop:6, color:'rgba(42,36,31,0.65)', fontSize:14, lineHeight:1.6}}>{body}</p>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { TreatmentsPage, SignaturePage });