// treatments.jsx — Skin treatments page (Sculptra, Microneedling, DiamondGlow, VI Peel)

function TreatmentsPage() {
  return (
    <div>
      <Header active="Treatments" />
      <PageHeader
        eyebrow="Skin Treatments"
        title="Treatments for skin that lasts."
        body="Beyond injectables, our menu of medical-grade skin treatments rebuilds collagen, refines tone, and corrects what time has written. Each one is tailored, evidence-based, and delivered with restraint."
      />
      <TreatmentNav />
      <Sculptra />
      <Microneedling />
      <DiamondGlow />
      <VIPeel />
      <BookCTA />
      <Footer />
    </div>
  );
}

function TreatmentNav() {
  const items = [
    { label: 'Sculptra', href: '#sculptra' },
    { label: 'SkinPen Microneedling', href: '#microneedling' },
    { label: 'DiamondGlow', href: '#diamondglow' },
    { label: 'VI Peel & GlowTox', href: '#vipeel' },
  ];
  return (
    <div className="bg-linen" style={{ borderBottom: '1px solid var(--color-border-subtle)', position: 'sticky', top: 92, zIndex: 30 }}>
      <div className="container" style={{ display: 'flex', gap: 32, padding: '18px 32px', overflowX: 'auto', justifyContent: 'center', flexWrap: 'wrap' }}>
        {items.map(i => (
          <a key={i.label} href={i.href} style={{ fontSize: 11, fontWeight: 500, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-deep-brown)', whiteSpace: 'nowrap', padding: '6px 0' }}>{i.label}</a>
        ))}
      </div>
    </div>
  );
}

// ── Reusable section building blocks ─────────────────────────────
function TreatmentSection({ id, eyebrow, title, lede, image, imageAlt, imagePos, imageRight, bg, children }) {
  return (
    <section id={id} className={bg ? `bg-${bg}` : ''} style={{ padding: '120px 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
      <div className="container">
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: imageRight ? '1.05fr 0.95fr' : '0.95fr 1.05fr', gap: 70, alignItems: 'center', marginBottom: 70 }}>
          {!imageRight && <TreatmentImage src={image} alt={imageAlt} pos={imagePos} />}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <Eyebrow>{eyebrow}</Eyebrow>
            <h2 className="h-section">{title}</h2>
            <HoneyRule />
            <p className="body-lg">{lede}</p>
          </div>
          {imageRight && <TreatmentImage src={image} alt={imageAlt} pos={imagePos} />}
        </div>
        {children}
      </div>
    </section>
  );
}

function TreatmentImage({ src, alt, pos }) {
  return (
    <div className={src ? 'photo-frame' : 'ph-image'} style={{
      aspectRatio: '4 / 5', borderRadius: 'var(--radius-xl)',
      boxShadow: 'var(--shadow-lg)',
    }}>
      {src && <img src={src} alt={alt} style={pos ? { objectPosition: pos } : undefined} />}
    </div>
  );
}

function PillarGrid({ pillars }) {
  return (
    <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 16 }}>
      {pillars.map((p, i) => (
        <div key={i} className="card" style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          <div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 38, color: 'var(--color-deep-brown)', lineHeight: 1 }}>{String(i + 1).padStart(2, '0')}</div>
          <h4 style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--color-deep-brown)' }}>{p.title}</h4>
          <p className="body-md" style={{ color: 'var(--color-taupe)' }}>{p.body}</p>
        </div>
      ))}
    </div>
  );
}

function DetailGrid({ details }) {
  return (
    <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: `repeat(${details.length}, 1fr)`, gap: 0, border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', background: 'var(--color-surface-raised)' }}>
      {details.map((d, i) => (
        <div key={i} style={{ padding: '28px 32px', borderRight: i < details.length - 1 ? '1px solid var(--color-border-subtle)' : 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <span className="eyebrow">{d.label}</span>
          <span style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 24, color: 'var(--color-deep-brown)', lineHeight: 1.2 }}>{d.value}</span>
          {d.note && <span className="body-sm">{d.note}</span>}
        </div>
      ))}
    </div>
  );
}

function BulletColumn({ title, items }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <h4 style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-deep-brown)' }}>{title}</h4>
      <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
            <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--color-deep-brown)', marginTop: 9, flexShrink: 0 }} />
            <span className="body-md" style={{ color: 'var(--color-deep-brown)' }}>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function BottomLine({ children }) {
  return (
    <div style={{ marginTop: 50, padding: '36px 44px', borderLeft: '3px solid var(--color-deep-brown)', background: 'var(--color-surface)', borderRadius: '0 var(--radius-lg) var(--radius-lg) 0' }}>
      <Eyebrow>The Bottom Line</Eyebrow>
      <p className="body-lg" style={{ marginTop: 12, fontFamily: 'var(--font-accent)', fontStyle: 'italic' }}>{children}</p>
    </div>
  );
}

// ── 1. SCULPTRA ─────────────────────────────────────────────────
function Sculptra() {
  return (
    <TreatmentSection
      id="sculptra"
      eyebrow="Sculptra®"
      title="Collagen restoration, redefined."
      lede="Sculptra is not a traditional filler — it's a biostimulatory treatment that works with your body to rebuild lost collagen and restore structure over time."
      image="/assets/tx/t-sculptra.jpg"
      imageAlt="Sculptra collagen restoration treatment"
      imagePos="center 25%"
      imageRight
    >
      <PillarGrid pillars={[
        { title: 'Replenishes Collagen', body: "Stimulates natural collagen production to improve skin structure and restore foundational support." },
        { title: 'Restores Volume', body: 'Softens hollow areas, smooths wrinkles, and restores balance without looking overfilled.' },
        { title: 'Gradual, Natural Results', body: "Results develop over time so you look refreshed, not treated. Often referred to as filler made by you." },
      ]} />

      <div style={{ marginTop: 60 }} className="grid-2" >
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 50 }}>
          <BulletColumn title="Who It's For" items={[
            'Volume loss in cheeks, temples, or jawline',
            'Deeper static lines and folds',
            'Early signs of aging',
            'Anyone seeking subtle, gradual change',
          ]} />
          <BulletColumn title="How It Works" items={[
            'Injectable poly-L-lactic acid placed beneath the skin',
            'Body rebuilds its own collagen scaffolding',
            'Volume is restored and skin quality improves',
            'Results unfold over weeks to months',
          ]} />
        </div>
      </div>

      <div style={{ marginTop: 56 }}>
        <DetailGrid details={[
          { label: 'Sessions', value: '2–3', note: 'first year, then one annual maintenance session' },
          { label: 'Spacing', value: '4–6 weeks', note: '~1 hour per visit' },
          { label: 'Visible Results', value: '8–12 weeks', note: 'continues building' },
          { label: 'Longevity', value: '2+ years', note: 'pricing $1800 / treatment (2 vials)' },
        ]} />
      </div>

      <div style={{ marginTop: 56 }} className="grid-2">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 50 }}>
          <BulletColumn title="What to Expect" items={[
            'Mild swelling, redness, possible bruising',
            'Temporary fullness subsides within hours',
            'Minimal downtime — return to most activities quickly',
          ]} />
          <BulletColumn title="The 5-5-5 Rule" items={[
            'Massage treated areas 5× daily',
            'For 5 minutes',
            'For 5 days following treatment',
            'Avoid heat and exercise 24h, makeup 48h',
          ]} />
        </div>
      </div>

      <BottomLine>
        Sculptra is a long-term investment in your skin. It restores what aging takes away by rebuilding your own collagen, delivering results that are subtle, natural, and long lasting.
      </BottomLine>
    </TreatmentSection>
  );
}

// ── 2. MICRONEEDLING ────────────────────────────────────────────
function Microneedling() {
  return (
    <TreatmentSection
      id="microneedling"
      eyebrow="SkinPen Microneedling"
      title="Collagen induction, refined."
      lede="SkinPen is a medical-grade microneedling treatment designed to improve skin texture, tone, and overall quality by stimulating your body's natural collagen production. The first FDA-cleared microneedling device proven to safely treat acne scars. We recommend a series of 3 treatments to maintain and continue improving results."
      image="/assets/tx/t-microneedling.jpg"
      imageAlt="SkinPen microneedling treatment"
      imagePos="center 28%"
      bg="linen"
    >
      <DetailGrid details={[
        { label: 'Single', value: '$450', note: 'face & neck' },
        { label: 'Trio', value: '$1,215', note: 'series of three' },
        { label: 'Add-On', value: '+ $75', note: 'décolleté per treatment' },
        { label: 'Time', value: '60 min', note: '1–3 days mild redness' },
      ]} />

      <div style={{ marginTop: 60 }}>
        <PillarGrid pillars={[
          { title: 'Stimulates Collagen & Elastin', body: "Controlled micro-injuries trigger your skin's natural healing, improving firmness and elasticity." },
          { title: 'Improves Texture & Tone', body: 'Softens acne scars, refines pores, and smooths uneven skin for a more polished appearance.' },
          { title: 'Brightens & Evens', body: 'Reduces hyperpigmentation, sun damage, and dullness for a clearer, more radiant complexion.' },
        ]} />
      </div>

      <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 50 }} className="grid-2">
        <BulletColumn title="What It Treats" items={[
          'Fine lines and wrinkles',
          'Acne scars',
          'Large pores',
          'Uneven texture',
          'Hyperpigmentation',
          'Stretch marks',
          'Skin laxity',
        ]} />
        <BulletColumn title="Plan & Aftercare" items={[
          'Series of 3 treatments, 6–8 weeks apart',
          'Annual maintenance after series',
          'Begin to notice change within 1 week',
          'No makeup 48h, no heat or sun 48–72h',
          'Pause retinol 5 days before, 5–7 days after',
          'Schedule 2+ weeks before any major event',
        ]} />
      </div>

      <BottomLine>
        SkinPen is a foundational treatment for long-term skin health. By stimulating your own collagen, it improves texture, tone, and overall skin quality in a way that looks natural and builds over time.
      </BottomLine>
    </TreatmentSection>
  );
}

// ── 3. DIAMONDGLOW ──────────────────────────────────────────────
function DiamondGlow() {
  return (
    <section id="diamondglow" style={{ padding: '120px 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
      <div className="container">
        <div style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', gap: 22, alignItems: 'center', marginBottom: 70 }}>
          <Eyebrow>DiamondGlow Facial</Eyebrow>
          <h2 className="h-section">Instant glow, deeply refined.</h2>
          <FadeRule style={{ margin: '6px auto' }} />
          <p className="body-lg" style={{ maxWidth: 760 }}>
            Often described as elevated hydradermabrasion, DiamondGlow exfoliates, extracts, and infuses the skin simultaneously with medical-grade serums tailored to your concerns. Two tiers — the same diamond-tip resurfacing, with optional dermaplaning, extractions, mask, and massage on the Plus.
          </p>
        </div>

        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
          {/* Basic */}
          <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 22, padding: 44 }}>
            <Eyebrow>Tier One</Eyebrow>
            <h3 className="h-sub" style={{ fontSize: 34 }}>DiamondGlow Basic</h3>
            <HoneyRule />
            <div style={{ display: 'flex', gap: 30, flexWrap: 'wrap', padding: '14px 0', borderTop: '1px solid var(--color-border-subtle)', borderBottom: '1px solid var(--color-border-subtle)' }}>
              <div><div className="eyebrow">Single</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-deep-brown)' }}>$225</div></div>
              <div><div className="eyebrow">Pkg of 3</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-deep-brown)' }}>$540</div></div>
              <div><div className="eyebrow">Time</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-deep-brown)' }}>60 min</div></div>
              <div><div className="eyebrow">Downtime</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-deep-brown)' }}>None</div></div>
            </div>
            <p className="body-md">Reveal radiant, healthy skin with next-level resurfacing. The diamond-tip wand removes dead skin cells while clearing pores and infusing condition-specific serums for immediate, visible results.</p>
            <BulletColumn title="Why DiamondGlow" items={[
              'Deep exfoliation and extraction',
              'Customized serum infusion for deeper penetration',
              'Instant glow — brighter, smoother, more hydrated',
              'Buildable, monthly results',
            ]} />
            <p className="body-sm" style={{ marginTop: 8 }}><strong style={{ color: 'var(--color-deep-brown)', letterSpacing: '0.15em', textTransform: 'uppercase', fontSize: 11 }}>Add on</strong> &nbsp; Dermaplaning · Chemical Peel · Chest Treatment</p>
          </div>

          {/* Plus */}
          <div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 22, padding: 44, background: 'var(--color-deep-brown)', color: 'var(--color-ivory)', borderColor: 'var(--color-deep-brown)' }}>
            <Eyebrow variant="light">Tier Two · Elevated</Eyebrow>
            <h3 className="h-sub" style={{ fontSize: 34, color: 'var(--color-ivory)' }}>DiamondGlow Plus</h3>
            <div className="brown-rule" style={{ background: 'var(--color-tan)' }} />
            <div style={{ display: 'flex', gap: 30, flexWrap: 'wrap', padding: '14px 0', borderTop: '1px solid rgba(255,255,255,0.12)', borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
              <div><div className="eyebrow eyebrow-light">Single</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-ivory)' }}>$300</div></div>
              <div><div className="eyebrow eyebrow-light">Pkg of 3</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-ivory)' }}>$810</div></div>
              <div><div className="eyebrow eyebrow-light">Time</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-ivory)' }}>75 min</div></div>
              <div><div className="eyebrow eyebrow-light">Downtime</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 26, color: 'var(--color-ivory)' }}>None</div></div>
            </div>
            <p className="body-md" style={{ color: 'var(--color-taupe)' }}>An advanced, extended version of DiamondGlow combining resurfacing with dermaplaning and added massage for smoother skin, deeper product penetration, and a more elevated experience.</p>
            <div>
              <div className="eyebrow eyebrow-light" style={{ marginBottom: 10 }}>Includes</div>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
                {['DiamondGlow resurfacing','Dermaplaning','Targeted extractions','Treatment mask','Hand and arm massage'].map(s => (
                  <li key={s} style={{ display: 'flex', gap: 12, alignItems: 'center', color: 'var(--color-ivory)', fontSize: 15 }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--color-tan)' }} /> {s}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>

        <BottomLine>
          DiamondGlow is more than a facial. It's a results-driven treatment that delivers immediate radiance while improving overall skin health with continued use. Plus delivers deeper results with a more elevated experience.
        </BottomLine>
      </div>
    </section>
  );
}

// ── 4. VI PEEL & GLOWTOX ───────────────────────────────────────
function VIPeel() {
  return (
    <TreatmentSection
      id="vipeel"
      eyebrow="VI Peel"
      title="Correct, brighten, transform."
      lede="A medical-grade, medium-depth chemical peel designed to improve tone, texture, acne, and pigmentation in a single treatment. A powerful blend of exfoliating acids and brightening ingredients works beneath the surface to reveal clearer, smoother, more radiant skin."
      image="/assets/tx/t-vipeel.jpg"
      imageAlt="VI Peel chemical peel treatment"
      imagePos="center 35%"
      bg="linen"
      imageRight
    >
      <DetailGrid details={[
        { label: 'Price', value: '$450', note: 'per treatment' },
        { label: 'Time', value: '45 min' },
        { label: 'Downtime', value: 'Day 3+', note: 'peeling for several days' },
        { label: 'Frequency', value: '6–8 wks', note: 'series for best results' },
      ]} />

      <div style={{ marginTop: 60 }}>
        <PillarGrid pillars={[
          { title: 'Targets Pigment', body: 'Improves melasma, sun damage, and uneven skin tone across all skin types.' },
          { title: 'Clears Acne', body: 'Reduces active breakouts while refining pores and calming inflammation.' },
          { title: 'Smooths Texture', body: 'Stimulates collagen and cellular turnover for softer, more even skin.' },
        ]} />
      </div>

      <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 50 }} className="grid-2">
        <BulletColumn title="What It Treats" items={[
          'Melasma and hyperpigmentation',
          'Acne and acne scarring',
          'Sun damage',
          'Fine lines and wrinkles',
          'Uneven tone and texture',
        ]} />
        <BulletColumn title="VI Peel Options" items={[
          'VI Original — overall tone, texture, radiance',
          'VI Precision Plus — stubborn pigment & sun damage',
          'VI Purify — active acne, inflammation, congestion',
        ]} />
      </div>

      {/* GlowTox callout */}
      <div style={{ marginTop: 70, padding: 50, borderRadius: 'var(--radius-xl)', background: 'var(--color-deep-brown)', color: 'var(--color-ivory)' }}>
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 50, alignItems: 'center' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <Eyebrow variant="light">Advanced Combination</Eyebrow>
            <h3 className="h-section" style={{ color: 'var(--color-ivory)', fontSize: 'clamp(32px, 3.5vw, 48px)' }}>GlowTox.</h3>
            <div className="brown-rule" style={{ background: 'var(--color-tan)' }} />
            <p className="body-md" style={{ color: 'var(--color-taupe)' }}>
              GlowTox pairs a VI Peel with toxin treatment for enhanced, full-face rejuvenation. This combination improves skin quality while softening expression lines — clinical data shows significant improvement in wrinkles, texture, and sun damage when these are combined.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, paddingBottom: 20, borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
              <span className="eyebrow eyebrow-light">Pricing</span>
              <span style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 30, color: 'var(--color-ivory)', lineHeight: 1.2 }}>$350 peel + $14 / unit toxin</span>
              <span className="body-sm" style={{ color: 'var(--color-taupe)' }}>Save $100 vs. booking separately. Regularly $450 for VI Peel.</span>
            </div>
            <div>
              <span className="eyebrow eyebrow-light">Pre-Treatment</span>
              <p className="body-md" style={{ color: 'var(--color-taupe)', marginTop: 8 }}>No waxing, lasers, or depilatories 1 week prior. Pause retinol & exfoliants 3 days before. Avoid if pregnant, breastfeeding, or with active skin irritation.</p>
            </div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 56 }}>
        <BulletColumn title="Post-Treatment Care" items={[
          'Use only gentle skincare until peeling begins',
          'Avoid heat, sweating, and sun exposure',
          'Do not pick or peel the skin — let it shed naturally',
          'Peeling typically starts Day 3 and lasts 3–7 days',
          'Results continue to improve as the skin heals',
        ]} />
      </div>

      <BottomLine>
        VI Peel is a results-driven treatment that corrects multiple skin concerns at once. It is one of the most effective ways to improve clarity, texture, and overall skin health with visible results after just one treatment.
      </BottomLine>
    </TreatmentSection>
  );
}

Object.assign(window, { TreatmentsPage });