// Pretty Rare Boutique — Dedicated Treatments Page Component

const TDATA = [
  {
    catKey: 'cosmetic',
    catLabel: 'Cosmetic Injectables',
    catDesc: 'Considered, nurse-led injectable treatments to soften, balance, and refresh — always planned around you.',
    items: [
      {
        name: 'Cosmetic Consultation',
        dur: '20 mins', price: 'Complimentary',
        img: 'assets/imagery/treatments-page.jpg',
        desc: 'Your first step. A personalised, no-obligation consultation to explore your goals, discuss your options, and build a plan that works for you — before any commitment.',
        tags: ['All clients', 'No downtime'],
      },
      {
        name: 'Anti-Wrinkle Treatment',
        dur: '35 mins', price: 'From $390',
        img: 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_30hjuiOcuqdpoatTyu0lnUT4IGk%2Fhf_20260531_104416_0ce95db9-31a1-4b3b-b991-27841afbdded.png&w=1920&q=85',
        desc: 'Precisely targeted muscle-relaxing treatment to soften dynamic expression lines while preserving natural movement. Results that look like you — just more rested.',
        tags: ['Forehead', 'Frown lines', "Crow's feet"],
      },
      {
        name: 'Lip Enhancement',
        dur: '1 hour', price: 'From $690',
        img: 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_30hjuiOcuqdpoatTyu0lnUT4IGk%2Fhf_20260531_104323_92d05634-eceb-47da-af71-52e9067810d8.png&w=1920&q=85',
        desc: 'Soft tissue filler for lips, personalised to your anatomy and preferences. Shape, definition, hydration — or a subtle combination of all three.',
        tags: ['Shape & definition', 'Volume', 'Hydration'],
      },
      {
        name: 'Facial Volumising',
        dur: '1 hour', price: 'From $790',
        img: 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_30hjuiOcuqdpoatTyu0lnUT4IGk%2Fhf_20260531_104348_202b35c9-6b18-4f7f-9b8b-6880bf48df02.png&w=1920&q=85',
        desc: 'Consultation-led facial balancing and volume restoration using dermal filler. Carefully planned around your natural anatomy for a harmonious, refreshed result.',
        tags: ['Cheeks', 'Jawline', 'Temples'],
      },
    ],
  },
  {
    catKey: 'skin',
    catLabel: 'Advanced Skin',
    catDesc: 'Skin-quality treatments that work with your biology — supporting texture, repair, and long-term radiance.',
    items: [
      {
        name: 'Rejuran Treatment',
        dur: '45 mins', price: 'From $590',
        img: 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_30hjuiOcuqdpoatTyu0lnUT4IGk%2Fhf_20260531_104908_da6126e8-897c-4279-b8d1-9172a6f00d72.png&w=1920&q=85',
        desc: 'PDRN/PN skin bioremodelling to support natural repair, improving texture, hydration, and fine lines — particularly effective for delicate under-eye areas.',
        tags: ['Texture', 'Fine lines', 'Under-eye'],
      },
      {
        name: 'Collagen Stimulator',
        dur: '30 mins', price: 'From $890',
        img: 'https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_30hjuiOcuqdpoatTyu0lnUT4IGk%2Fhf_20260531_104918_39a9c863-b12f-4763-ba9c-c38b39e8ddae.png&w=1920&q=85',
        desc: 'A longer-lasting skin quality treatment that gradually stimulates your body\'s natural collagen production for progressive improvements in structure and firmness.',
        tags: ['Collagen', 'Skin quality', 'Long-term'],
      },
    ],
  },
  {
    catKey: 'iv',
    catLabel: 'IV Wellness',
    catDesc: 'Intravenous infusions customised for hydration, glow, energy, and recovery support.',
    items: [
      {
        name: 'Restorative IV Infusion',
        dur: '40 mins', price: 'From $280',
        img: 'https://i.postimg.cc/FsVYRBXX/Chat-GPT-Image-May-31-2026-09-35-25-PM.png',
        desc: 'A customised blend of vitamins, minerals, and fluids delivered intravenously for rapid replenishment. Ideal for hydration, skin glow, energy, or immune support.',
        tags: ['Hydration', 'Vitamins', 'Energy & glow'],
      },
    ],
  },
];

function TreatCard({ item, onBook }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--surface)',
        border: '1px solid ' + (hover ? 'var(--border-pink)' : 'var(--border)'),
        borderRadius: 20,
        overflow: 'hidden',
        boxShadow: hover ? 'var(--shadow-md)' : 'var(--shadow-sm)',
        transform: hover ? 'translateY(-6px)' : 'translateY(0)',
        transition: 'all 400ms var(--ease-soft)',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      {/* Arch image */}
      <div className="tpage-card-arch" style={{
        margin: '18px 18px 0',
        borderRadius: '9999px 9999px 0 0',
        height: 230,
        overflow: 'hidden',
        flexShrink: 0,
      }}>
        <div style={{
          width: '100%', height: '100%',
          backgroundImage: 'url(\'' + item.img + '\')',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          transform: hover ? 'scale(1.06)' : 'scale(1)',
          transition: 'transform 900ms var(--ease-soft)',
        }} />
      </div>

      <div className="tpage-card-body" style={{ padding: '22px 26px 28px', flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
        {/* Duration + Price */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
          <span style={{
            fontFamily: 'var(--font-sans)', fontSize: 11, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 500,
          }}>{item.dur}</span>
          <span style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 500,
            fontSize: 21, color: 'var(--fg)',
          }}>{item.price}</span>
        </div>

        {/* Name */}
        <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 600,
          fontSize: 23, letterSpacing: '-0.01em', lineHeight: 1.15,
          color: 'var(--fg)', margin: 0,
        }}>{item.name}</h3>

        {/* Description */}
        <p style={{
          fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.68,
          color: 'var(--fg-soft)', margin: '11px 0 0 0', flexGrow: 1,
        }}>{item.desc}</p>

        {/* Tags */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7, marginTop: 18 }}>
          {item.tags.map(function(tag) {
            return React.createElement('span', {
              key: tag,
              style: {
                padding: '5px 12px', borderRadius: 999,
                background: 'var(--bg-blush)',
                fontFamily: 'var(--font-sans)', fontSize: 11,
                color: 'var(--accent-deep)', fontWeight: 500, letterSpacing: '0.02em',
              },
            }, tag);
          })}
        </div>

        {/* Book CTA */}
        <button
          onClick={() => onBook(item)}
          style={{
            marginTop: 22, background: 'transparent', border: 'none',
            padding: '0 0 4px 0',
            borderBottom: '1px solid ' + (hover ? 'var(--accent)' : 'var(--border)'),
            color: hover ? 'var(--accent)' : 'var(--fg-muted)',
            transition: 'all 240ms var(--ease-soft)',
            display: 'inline-flex', alignItems: 'center', gap: 10,
            fontFamily: 'var(--font-sans)', fontSize: 11.5, letterSpacing: '0.22em',
            textTransform: 'uppercase', fontWeight: 500, cursor: 'pointer',
            width: 'fit-content',
          }}
        >
          Book this treatment
          <span style={{
            transition: 'transform 240ms var(--ease-soft)',
            transform: hover ? 'translateX(4px)' : 'translateX(0)',
            display: 'inline-block',
          }}>→</span>
        </button>
      </div>
    </div>
  );
}

function ConsultPromoCard({ onBook }) {
  return (
    <div style={{
      background: 'var(--bg-blush)',
      border: '1px solid var(--border-pink)',
      borderRadius: 20,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      padding: '52px 36px',
      textAlign: 'center', gap: 22,
    }}>
      <img
        src="assets/logo-pr.jpg"
        alt="Pretty Rare Boutique"
        style={{
          width: 96, height: 96, borderRadius: '50%',
          objectFit: 'cover', objectPosition: '50% 50%',
          boxShadow: '0 8px 28px rgba(208,111,160,0.22)',
        }}
      />
      <div>
        <h3 style={{
          fontFamily: 'var(--font-display)', fontWeight: 500,
          fontSize: 26, letterSpacing: '-0.01em',
          lineHeight: 1.18, color: 'var(--fg)', margin: 0,
        }}>Not sure where<br/>to start?</h3>
        <p style={{
          fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.65,
          color: 'var(--fg-soft)', margin: '14px 0 0 0',
        }}>
          Book a complimentary consultation and we'll guide you through the options
          best suited to your goals.
        </p>
      </div>
      <button className="btn btn--pink" onClick={() => onBook(null)}>
        Free Consultation
      </button>
    </div>
  );
}

function CatSection({ cat, idx, onBook }) {
  return (
    <section className="tpage-cat" style={{ padding: '72px 0' }}>
      <div className="wrap">
        {/* Category header */}
        <div style={{
          display: 'grid', gridTemplateColumns: '64px 1fr',
          gap: 36, alignItems: 'start',
          paddingBottom: 44, marginBottom: 44,
          borderBottom: '1px solid var(--border)',
        }}>
          <div className="tpage-cat-num" style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontWeight: 400, fontSize: 48, color: 'var(--accent)',
            lineHeight: 1, paddingTop: 4,
          }}>
            {String(idx + 1).padStart(2, '0')}
          </div>
          <div>
            <div className="eyebrow eyebrow--solo" style={{ marginBottom: 14 }}>{cat.catLabel}</div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 500,
              fontSize: 'clamp(26px, 3vw, 42px)', letterSpacing: '-0.016em',
              lineHeight: 1.08, color: 'var(--fg)', margin: '0 0 14px',
            }}>{cat.catLabel}</h2>
            <p style={{
              fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.7,
              color: 'var(--fg-soft)', margin: 0, maxWidth: 540,
            }}>{cat.catDesc}</p>
          </div>
        </div>

        {/* Cards grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 28,
        }}>
          {cat.items.map(function(item) {
            return React.createElement(TreatCard, { key: item.name, item: item, onBook: onBook });
          })}
          {cat.items.length === 1 && React.createElement(ConsultPromoCard, { onBook: onBook })}
        </div>
      </div>
    </section>
  );
}

function SiteTreatmentsPage({ onBook }) {
  const [filter, setFilter] = React.useState('all');

  const FILTERS = [
    { key: 'all',       label: 'All Treatments' },
    { key: 'cosmetic',  label: 'Cosmetic' },
    { key: 'skin',      label: 'Skin' },
    { key: 'lymphatic', label: 'Lymphatic' },
    { key: 'iv',        label: 'IV Wellness' },
  ];

  const filtered = filter === 'all' ? TDATA : TDATA.filter(function(c) { return c.catKey === filter; });

  return (
    <div>
      {/* Hero */}
      <section className="tpage-hero" style={{
        background: 'var(--bg-blush)',
        paddingTop: 152,
        paddingBottom: 72,
        textAlign: 'center',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <div className="halo" style={{ top: '-20%', left: '8%', width: 560, height: 560, opacity: 0.8 }} />
        <div className="halo halo--gold" style={{ bottom: '-20%', right: '8%', width: 480, height: 480, opacity: 0.7 }} />

        <div className="wrap-prose" style={{ position: 'relative' }}>
          {/* Flourish */}
          <div className="flourish" style={{ marginBottom: 28 }}>
            <div className="dot"></div>
          </div>

          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500,
            fontSize: 'clamp(46px, 7.5vw, 96px)', lineHeight: 0.98,
            letterSpacing: '-0.022em', color: 'var(--fg)', margin: 0,
          }}>Our Treatments</h1>

          <div style={{
            fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontWeight: 400, fontSize: 'clamp(20px, 2.6vw, 30px)',
            color: 'var(--accent)', marginTop: 10, marginBottom: 24,
          }}>personalised to you</div>

          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.72,
            color: 'var(--fg-soft)', margin: '0 auto', maxWidth: 480,
          }}>
            Every treatment begins with a personalised consultation. Suitability
            and planning are always discussed first — nothing is ever rushed.
          </p>

          {/* Filter pills */}
          <div className="tpage-filters" style={{
            marginTop: 48,
            display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 10,
          }}>
            {FILTERS.map(function(f) {
              const active = filter === f.key;
              return React.createElement('button', {
                key: f.key,
                onClick: function() { setFilter(f.key); },
                style: {
                  padding: '13px 26px', borderRadius: 999,
                  border: '1px solid ' + (active ? 'var(--accent)' : 'rgba(17,17,20,0.18)'),
                  background: active ? 'var(--accent)' : 'rgba(255,255,255,0.75)',
                  color: active ? '#fff' : 'var(--fg)',
                  fontFamily: 'var(--font-sans)', fontSize: 12,
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                  fontWeight: 500, cursor: 'pointer',
                  transition: 'all 240ms var(--ease-soft)',
                  backdropFilter: 'blur(8px)',
                  WebkitBackdropFilter: 'blur(8px)',
                },
              }, f.label);
            })}
          </div>
        </div>
      </section>

      {/* Treatment category sections */}
      {filtered.map(function(cat, i) {
        return React.createElement('div', {
          key: cat.catKey,
          style: {
            background: i % 2 === 0 ? 'var(--bg)' : 'var(--bg-alt)',
            borderTop: '1px solid var(--border)',
          },
        }, React.createElement(CatSection, { cat: cat, idx: i, onBook: onBook }));
      })}

      {/* Pricing disclaimer */}
      <div style={{ background: 'var(--bg-ink)', padding: '36px 0' }}>
        <div className="wrap-prose" style={{ textAlign: 'center' }}>
          <p style={{
            fontFamily: 'var(--font-sans)', fontSize: 13, lineHeight: 1.72,
            color: 'rgba(252,245,249,0.55)', margin: 0,
          }}>
            Final pricing is confirmed at consultation. All
            treatments require a consultation to assess individual suitability. Information on this
            page is general only and is not a substitute for personalised medical advice.
          </p>
        </div>
      </div>
    </div>
  );
}

window.SiteTreatmentsPage = SiteTreatmentsPage;