// procedures.jsx — Injectable procedures page

const BOTOX_AREAS = [
  { name: 'Forehead', body: 'Soften horizontal expression lines while preserving natural movement.' },
  { name: '11s / Glabella', body: 'Relax the vertical lines between the brows for a calmer, more open expression.' },
  { name: 'Crows Feet', body: 'Smooth lines around the eyes that deepen with smiling and squinting.' },
  { name: 'Brow Lift', body: 'Subtle, strategic placement to gently lift and open the brow.' },
  { name: 'Lip Flip', body: 'A few units to roll the upper lip outward — softer, fuller, no filler required.' },
  { name: 'Bunny Lines', body: 'Tiny lines on the bridge of the nose, smoothed in seconds.' },
  { name: 'Gummy Smile', body: 'Lower the upper lip to balance the gum-to-tooth ratio when smiling.' },
  { name: 'Chin · Pebble', body: 'Smooth the dimpling and orange-peel texture on the chin.' },
  { name: 'Masseter / TMJ', body: 'Slim the jawline, reduce clenching, ease tension headaches.' },
  { name: 'Neck Bands', body: 'Soften vertical platysmal bands for a smoother neck.' },
  { name: 'Hyperhidrosis', body: 'Reduce excessive underarm sweating with targeted treatment.' },
];

const FILLER_AREAS = [
  { name: 'Lips', body: 'Subtle volume, definition, and balance — never overfilled.' },
  { name: 'Cheeks', body: 'Restore midface volume to lift, support, and refresh the entire face.' },
  { name: 'Chin', body: 'Improve projection and balance for a more refined profile.' },
  { name: 'Jawline', body: 'Sculpt and define the jawline for structure and contour.' },
  { name: 'Marionette Lines', body: 'Soften the lines that run from the corners of the mouth downward.' },
  { name: 'Nasolabial Folds', body: 'Restore midface support so the smile lines soften naturally.' },
  { name: 'Tear Trough', body: 'Carefully treated under-eye hollows for a rested, brighter appearance.' },
  { name: 'Temples', body: 'Replenish hollow temples that contribute to an aged, drawn look.' },
];

function ProceduresPage() {
  return (
    <div>
      <Header active="Procedures" />
      <PageHeader
        eyebrow="Injectable Procedures"
        title="Where artistry meets anatomy."
        body="Neuromodulators and dermal fillers, placed with the patience and precision of a cosmetic nurse with sixteen years at the chair. Every plan begins with a consultation and ends with a result that looks like you — only more rested."
      />
      <ProcedureNav />
      <Botox />
      <Filler />
      <Process />
      <BookCTA />
      <Footer />
    </div>
  );
}

function ProcedureNav() {
  const items = [
    { label: 'Botox & Dysport', href: '#botox' },
    { label: 'Dermal Filler', href: '#filler' },
    { label: 'The Process', href: '#process' },
  ];
  return (
    <div className="bg-linen" style={{ borderBottom: '1px solid var(--color-border-subtle)' }}>
      <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>
  );
}

function Botox() {
  return (
    <section id="botox" style={{ padding: '120px 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
      <div className="container">
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '0.95fr 1.05fr', gap: 70, alignItems: 'center', marginBottom: 70 }}>
          <div className="photo-frame" style={{ aspectRatio: '4 / 5', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)' }}>
            <img src="/assets/tx/t-botox.jpg" alt="Botox and Dysport neuromodulator treatment" style={{ objectPosition: 'center 30%' }} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <Eyebrow>Neuromodulators</Eyebrow>
            <h2 className="h-section">Botox & Dysport.</h2>
            <HoneyRule />
            <p className="body-lg">
              Neuromodulators temporarily relax targeted facial muscles to soften expression lines and prevent new ones from forming. Used artfully, the result is a face that still moves, still emotes — only more softly. We carry both Botox and Dysport and recommend the molecule that best suits your physiology.
            </p>
            <div style={{ display: 'flex', gap: 28, marginTop: 8, paddingTop: 24, borderTop: '1px solid var(--color-border-subtle)' }}>
              <div><div className="eyebrow">Botox &amp; Dysport</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 28, color: 'var(--color-deep-brown)' }}>$14 / unit</div></div>
            </div>
            <p className="body-sm">Results visible in 3–7 days · Lasts 3–4 months · Lunch-hour treatment, no downtime.</p>
          </div>
        </div>

        <div style={{ marginTop: 30 }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Treatment Areas</div>
          <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', background: 'var(--color-surface-raised)' }}>
            {BOTOX_AREAS.map((a, i) => (
              <div key={a.name} style={{
                padding: '28px 32px',
                borderRight: (i + 1) % 3 !== 0 ? '1px solid var(--color-border-subtle)' : 'none',
                borderBottom: i < BOTOX_AREAS.length - (BOTOX_AREAS.length % 3 || 3) ? '1px solid var(--color-border-subtle)' : 'none',
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <h4 style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 22, color: 'var(--color-deep-brown)' }}>{a.name}</h4>
                <p className="body-sm">{a.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Filler() {
  return (
    <section id="filler" className="bg-linen" style={{ padding: '120px 0', borderBottom: '1px solid var(--color-border-subtle)' }}>
      <div className="container">
        <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 70, alignItems: 'center', marginBottom: 70 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
            <Eyebrow>Dermal Filler</Eyebrow>
            <h2 className="h-section">Restylane.</h2>
            <HoneyRule />
            <p className="body-lg">
              Hyaluronic acid filler restores volume where time has taken it — cheeks, lips, chin, jawline, tear troughs. The art is knowing when to stop. We use the Restylane family of products to match the right formulation to the right area, building structure and balance with a measured hand.
            </p>
            <div style={{ display: 'flex', gap: 28, marginTop: 8, paddingTop: 24, borderTop: '1px solid var(--color-border-subtle)' }}>
              <div><div className="eyebrow">Pricing</div><div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 28, color: 'var(--color-deep-brown)' }}>$800 / syringe</div></div>
            </div>
            <p className="body-sm">Results visible immediately · Lasts 9–24 months depending on area & product.</p>
          </div>
          <div className="photo-frame" style={{ aspectRatio: '4 / 5', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)' }}>
            <img src="/assets/tx/t-filler.jpg" alt="Restylane dermal filler treatment" style={{ objectPosition: 'center 35%' }} />
          </div>
        </div>

        <div style={{ marginTop: 30 }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Areas We Treat</div>
          <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', background: 'var(--color-surface-raised)' }}>
            {FILLER_AREAS.map((a, i) => (
              <div key={a.name} style={{
                padding: '28px 28px',
                borderRight: (i + 1) % 4 !== 0 ? '1px solid var(--color-border-subtle)' : 'none',
                borderBottom: i < 4 ? '1px solid var(--color-border-subtle)' : 'none',
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <h4 style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 22, color: 'var(--color-deep-brown)' }}>{a.name}</h4>
                <p className="body-sm">{a.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    { n: '01', title: 'Consultation', body: 'A relaxed, no-pressure conversation about your goals, concerns, and history. We map a plan together — short term and long.' },
    { n: '02', title: 'Treatment', body: 'Numbing where appropriate. Precise, careful placement. Most appointments take 30–60 minutes from start to finish.' },
    { n: '03', title: 'Recovery', body: 'Most patients return to normal activity immediately. Light bruising or swelling resolves within a few days.' },
    { n: '04', title: 'Follow-Up', body: 'A complimentary two-week check for new neuromodulator patients. We refine and adjust until the result is right.' },
  ];
  return (
    <section id="process" style={{ padding: '120px 0' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 64, display: 'flex', flexDirection: 'column', gap: 18, alignItems: 'center' }}>
          <Eyebrow>The Process</Eyebrow>
          <h2 className="h-section">From consultation to result.</h2>
          <FadeRule style={{ margin: '6px auto' }} />
        </div>
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {steps.map(s => (
            <div key={s.n} style={{ display: 'flex', flexDirection: 'column', gap: 14, padding: '36px 32px', background: 'var(--color-surface-raised)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-xl)' }}>
              <div style={{ fontFamily: 'var(--font-accent)', fontStyle: 'italic', fontSize: 38, color: 'var(--color-deep-brown)', lineHeight: 1 }}>{s.n}</div>
              <h4 style={{ fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--color-deep-brown)' }}>{s.title}</h4>
              <p className="body-md" style={{ color: 'var(--color-taupe)' }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          #process .grid-3 { grid-template-columns: 1fr 1fr !important; }
          #filler .grid-3, #botox .grid-3 { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          #process .grid-3, #filler .grid-3, #botox .grid-3 { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ProceduresPage, Botox, Filler, Process });