/* Sample Article — public preview of a delivered, doctor-reviewed MedSpaCopy article.
   Demonstrates editorial typography, in-article markers, citation handling, review badge. */

function ArticleSampleBanner() {
  return (
    <div style={{
      background: P4.accent, color: '#fff', padding: '10px 56px',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      fontFamily: FONT_MONO, fontSize: 11.5, letterSpacing: '0.08em', textTransform: 'uppercase',
    }}>
      <span>Sample article · public preview · not patient advice</span>
      <a href="/" style={{ color: '#fff', textDecoration: 'underline', textUnderlineOffset: 3, opacity: 0.92 }}>
        Order one for your clinic →
      </a>
    </div>
  );
}

function ReviewBadge_v4() {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 12px', borderRadius: 999,
      background: `color-mix(in oklab, ${P4.good} 12%, transparent)`,
      color: P4.good, fontFamily: FONT_MONO, fontSize: 10.5,
      fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase',
    }}>
      <Marker_v4 kind="good" size={16} />
      Reviewed by US-licensed physician
    </span>
  );
}

function ArticleCallout({ kind, title, children }) {
  const tints = {
    info:        { bg: P4.accent50,   bd: P4.accent100,  ink: P4.ink },
    opportunity: { bg: P4.warmTint,   bd: P4.borderWarm, ink: P4.warmInk },
    issue:       { bg: '#fbf2e8',     bd: '#ecd9bd',     ink: P4.warmInk },
  };
  const t = tints[kind] || tints.info;
  return (
    <aside style={{
      margin: '28px 0', padding: '20px 22px',
      background: t.bg, border: `1px solid ${t.bd}`, borderRadius: 10,
      display: 'flex', gap: 14, alignItems: 'flex-start',
    }}>
      <Marker_v4 kind={kind} size={26} />
      <div>
        <div style={{ fontFamily: FONT_SANS, fontWeight: 600, fontSize: 14, color: t.ink, marginBottom: 4, letterSpacing: '-0.01em' }}>{title}</div>
        <div style={{ fontSize: 14.5, lineHeight: 1.62, color: P4.inkMid }} className="pretty">{children}</div>
      </div>
    </aside>
  );
}

function ArticleH2({ id, children }) {
  return (
    <h2 id={id} style={{
      fontFamily: FONT_SERIF, fontWeight: 500, fontSize: 30, lineHeight: 1.18,
      letterSpacing: '-0.018em', color: P4.ink,
      margin: '52px 0 18px', fontVariationSettings: '"opsz" 64',
    }} className="balance">{children}</h2>
  );
}

function ArticleH3({ children }) {
  return (
    <h3 style={{
      fontFamily: FONT_SANS, fontWeight: 600, fontSize: 17, lineHeight: 1.3,
      letterSpacing: '-0.012em', color: P4.ink, margin: '32px 0 10px',
    }}>{children}</h3>
  );
}

function ArticleP({ children }) {
  return (
    <p style={{
      fontSize: 16.5, lineHeight: 1.72, color: P4.ink, margin: '14px 0',
      fontFamily: FONT_BODY,
    }} className="pretty">{children}</p>
  );
}

function PullQuote({ children, cite }) {
  return (
    <figure style={{
      margin: '36px -32px',
      padding: '28px 32px',
      borderTop: `1px solid ${P4.border}`,
      borderBottom: `1px solid ${P4.border}`,
    }}>
      <blockquote style={{
        margin: 0, fontFamily: FONT_SERIF, fontWeight: 400, fontSize: 24,
        lineHeight: 1.4, letterSpacing: '-0.01em', color: P4.ink,
        fontVariationSettings: '"opsz" 96, "SOFT" 80', fontStyle: 'italic',
      }} className="balance">
        &ldquo;{children}&rdquo;
      </blockquote>
      {cite && (
        <figcaption style={{
          marginTop: 12, fontFamily: FONT_MONO, fontSize: 11, color: P4.inkSoft,
          letterSpacing: '0.08em', textTransform: 'uppercase',
        }}>— {cite}</figcaption>
      )}
    </figure>
  );
}

function Citation({ n, children }) {
  return (
    <li id={`cite-${n}`} style={{
      display: 'grid', gridTemplateColumns: '32px 1fr', gap: 10,
      padding: '12px 0', borderBottom: `1px solid ${P4.border}`,
      fontSize: 13.5, lineHeight: 1.55, color: P4.inkMid,
    }}>
      <span style={{ fontFamily: FONT_MONO, fontSize: 11, color: P4.inkSoft, fontWeight: 600 }}>[{n}]</span>
      <span>{children}</span>
    </li>
  );
}

function CiteRef({ n }) {
  return (
    <a href={`#cite-${n}`} style={{
      display: 'inline-block', verticalAlign: 'super',
      fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600,
      color: P4.accent, textDecoration: 'none', padding: '0 3px',
      lineHeight: 1, letterSpacing: '0.04em',
    }}>[{n}]</a>
  );
}

function PageSampleArticle() {
  const toc = [
    { id: 's-what',    label: 'What microneedling actually does' },
    { id: 's-rf',      label: 'Where RF microneedling differs' },
    { id: 's-evidence',label: 'What the evidence supports — and what it does not' },
    { id: 's-fit',     label: 'Who it is a good fit for' },
    { id: 's-recovery',label: 'Realistic recovery and results' },
    { id: 's-cost',    label: 'Cost, sessions, and value framing' },
    { id: 's-ask',     label: 'What to ask before you book' },
  ];

  return (
    <div style={{ background: '#fff' }}>
      <ArticleSampleBanner />
      <Header_v4 />

      {/* Article hero */}
      <section style={{ padding: '64px 56px 32px', borderBottom: `1px solid ${P4.border}`, background: '#fff' }}>
        <div style={{ maxWidth: 880, margin: '0 auto' }}>
          <MonoKicker_v4 mb={14}>Treatments · Skin · Evidence brief</MonoKicker_v4>
          <h1 style={{
            fontFamily: FONT_SERIF, fontWeight: 400, fontSize: 56, lineHeight: 1.05,
            letterSpacing: '-0.022em', color: P4.ink, margin: '0 0 20px',
            fontVariationSettings: '"opsz" 144, "SOFT" 60',
          }} className="balance">
            Microneedling vs. RF microneedling: what the science actually says about <em style={{ fontStyle: 'italic', color: P4.accent }}>skin tightening</em>.
          </h1>
          <p style={{
            fontFamily: FONT_SERIF, fontSize: 21, lineHeight: 1.5, color: P4.inkMid,
            margin: '0 0 28px', fontWeight: 300, letterSpacing: '-0.005em',
            fontVariationSettings: '"opsz" 96',
          }} className="pretty">
            Two procedures, two very different mechanisms — and a market that conflates them. Here is how a board-certified dermatologist would tell them apart, and what to expect from each.
          </p>

          <div style={{
            display: 'flex', alignItems: 'center', gap: 18, flexWrap: 'wrap',
            paddingTop: 20, borderTop: `1px solid ${P4.border}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{
                width: 40, height: 40, borderRadius: '50%',
                background: `linear-gradient(135deg, ${P4.accent100}, ${P4.warmTint})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: FONT_SERIF, fontSize: 15, color: P4.accent, fontWeight: 500,
              }}>RM</div>
              <div>
                <div style={{ fontFamily: FONT_SANS, fontSize: 13.5, fontWeight: 600, color: P4.ink }}>
                  Written for [Sample Clinic] · reviewed by R. Marsden, MD
                </div>
                <div style={{ fontFamily: FONT_MONO, fontSize: 11, color: P4.inkSoft, letterSpacing: '0.06em', marginTop: 2 }}>
                  Board-certified dermatologist · NPI 1487•••326 · TX, US
                </div>
              </div>
            </div>
            <span style={{ width: 1, height: 30, background: P4.border }} />
            <ReviewBadge_v4 />
            <span style={{ width: 1, height: 30, background: P4.border }} />
            <span style={{ fontFamily: FONT_MONO, fontSize: 11, color: P4.inkSoft, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              Updated · April 2026 · 9 min read
            </span>
          </div>
        </div>
      </section>

      {/* Body — 2-col with sticky TOC */}
      <section style={{ padding: '48px 56px 64px', background: '#fff' }}>
        <div style={{
          maxWidth: 1120, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '220px 1fr', gap: 56,
        }}>
          <aside style={{ position: 'sticky', top: 24, alignSelf: 'start', maxHeight: 'calc(100vh - 48px)', overflow: 'auto' }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.14em', color: P4.inkSoft, textTransform: 'uppercase', marginBottom: 14 }}>
              In this article
            </div>
            <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {toc.map((t, i) => (
                <li key={t.id} style={{ fontSize: 13.5, lineHeight: 1.45 }}>
                  <a href={`#${t.id}`} style={{ color: P4.inkMid, textDecoration: 'none', display: 'flex', gap: 8 }}>
                    <span style={{ fontFamily: FONT_MONO, fontSize: 11, color: P4.inkSoft, fontWeight: 600 }}>{String(i + 1).padStart(2, '0')}</span>
                    <span>{t.label}</span>
                  </a>
                </li>
              ))}
            </ol>

            <div style={{
              marginTop: 28, padding: 16, background: P4.surfaceTint, border: `1px solid ${P4.borderWarm}`, borderRadius: 10,
            }}>
              <div style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.12em', color: P4.warmInk, textTransform: 'uppercase', marginBottom: 8 }}>
                Editorial policy
              </div>
              <p style={{ fontSize: 12.5, lineHeight: 1.55, color: P4.inkMid, margin: 0 }} className="pretty">
                Every claim about treatments, recovery, or outcomes is reviewed by a US-licensed physician before publication. <a href="/sample-article" style={{ color: P4.accent }}>Read the full standard →</a>
              </p>
            </div>
          </aside>

          <article style={{ maxWidth: 720 }}>
            <ArticleP>
              If you have searched for &ldquo;skin tightening&rdquo; in the last year, you have almost certainly seen both microneedling and radiofrequency (RF) microneedling pitched as the same thing. They are not. They share a needle&mdash;and almost nothing else mechanically.<CiteRef n={1} />
            </ArticleP>
            <ArticleP>
              The short version: standard microneedling creates controlled micro-injuries that trigger a wound-healing response in the upper dermis. RF microneedling adds a second tool&mdash;heat&mdash;delivered through insulated needle tips, reaching deeper layers and contracting collagen as well as remodeling it. The two procedures answer different questions about your skin.
            </ArticleP>

            <ArticleCallout kind="info" title="What this article covers, and what it doesn&rsquo;t">
              We compare mechanisms, evidence, candidacy, recovery, and cost framing. We do not recommend a specific device or brand. Every patient&rsquo;s skin is different&mdash;use this as a conversation starter with your provider, not a substitute for one.
            </ArticleCallout>

            <ArticleH2 id="s-what">What microneedling actually does</ArticleH2>
            <ArticleP>
              Standard (mechanical) microneedling uses a pen or roller with very fine needles, typically 0.5&ndash;2.5 mm, to create thousands of vertical channels in the skin. The injury is small but real, and the body responds the way it responds to any small wound: platelets release growth factors, fibroblasts migrate to the area, and over the following weeks they lay down new collagen and elastin.<CiteRef n={2} />
            </ArticleP>
            <ArticleP>
              The clinical effect, when the protocol is right, is a gradual smoothing of texture, modest improvement in atrophic acne scars, and a softening of fine lines. It is best understood as a stimulus, not a transformation.
            </ArticleP>

            <ArticleH3>Where the conversation tends to go wrong</ArticleH3>
            <ArticleP>
              Marketing language often promises &ldquo;tightening&rdquo; from mechanical microneedling alone. The honest answer is that you may see a textural improvement and a subtle firming over a series of treatments, but the depth of effect is limited by the depth of the needle and the absence of thermal energy. If your primary concern is laxity rather than texture, this is the wrong starting point.
            </ArticleP>

            <ArticleCallout kind="opportunity" title="A useful frame for patients">
              Mechanical microneedling rewards patience and stacking&mdash;most published protocols recommend three to six sessions, four to six weeks apart, before evaluating outcome. One session is rarely enough to draw conclusions.<CiteRef n={3} />
            </ArticleCallout>

            <ArticleH2 id="s-rf">Where RF microneedling differs</ArticleH2>
            <ArticleP>
              RF microneedling adds insulated needle tips that deliver radiofrequency energy after they are seated in the skin. The shaft is insulated; only the tip emits energy. This means the surface stays relatively cool and the heat lands where the needle&rsquo;s tip is&mdash;typically deeper in the dermis or upper subcutis, depending on the depth setting.
            </ArticleP>
            <ArticleP>
              That heat does two things mechanical needling cannot. First, it causes immediate collagen contraction&mdash;a small, real effect that contributes to the &ldquo;tightened&rdquo; feel patients sometimes describe in the first month. Second, it triggers a deeper, longer remodeling response over three to six months as new collagen and elastin organize around the heated zones.<CiteRef n={4} />
            </ArticleP>

            <PullQuote cite="R. Marsden, MD · Dermatology · Editorial review">
              The single biggest source of patient disappointment is being sold an RF microneedling result from a mechanical microneedling protocol&mdash;or vice versa. They are different tools.
            </PullQuote>

            <ArticleH2 id="s-evidence">What the evidence supports&mdash;and what it does not</ArticleH2>
            <ArticleP>
              Peer-reviewed evidence supports clinically meaningful improvement in atrophic acne scars and skin texture for both modalities, with stronger evidence for RF microneedling in laxity and deeper rhytids.<CiteRef n={5} /> Evidence for body-area indications (abdomen, knees, upper arms) is more limited and mostly observational.
            </ArticleP>

            <ArticleCallout kind="issue" title="Where claims tend to outrun the data">
              Be cautious with claims of dramatic skin tightening from a single session, claims of permanent results, or claims that any device replaces a surgical consult for moderate-to-severe laxity. The data does not support those framings, even for the best devices on the market today.
            </ArticleCallout>

            <ArticleH2 id="s-fit">Who it is a good fit for</ArticleH2>
            <ArticleP>
              The best candidates for either procedure tend to share a few traits: realistic expectations, mild-to-moderate concerns rather than severe ones, willingness to do a series rather than a single session, and a stable skin condition (no active acne flare, no recent isotretinoin use within the timeframe your provider specifies).
            </ArticleP>
            <ArticleH3>RF microneedling tends to suit:</ArticleH3>
            <ul style={{ fontSize: 16.5, lineHeight: 1.72, color: P4.ink, paddingLeft: 22, margin: '12px 0' }}>
              <li style={{ marginBottom: 6 }}>Patients with mild laxity in the lower face, jawline, or neck</li>
              <li style={{ marginBottom: 6 }}>Acne scarring that has not responded to topical therapy alone</li>
              <li style={{ marginBottom: 6 }}>Patients who want a non-surgical option and are willing to commit to a series</li>
            </ul>
            <ArticleH3>Mechanical microneedling tends to suit:</ArticleH3>
            <ul style={{ fontSize: 16.5, lineHeight: 1.72, color: P4.ink, paddingLeft: 22, margin: '12px 0' }}>
              <li style={{ marginBottom: 6 }}>Texture-focused concerns: enlarged pores, fine lines, dull surface tone</li>
              <li style={{ marginBottom: 6 }}>Patients who want a lower-cost entry point to collagen induction</li>
              <li style={{ marginBottom: 6 }}>Skin types where thermal energy is contraindicated or deferred</li>
            </ul>

            <ArticleH2 id="s-recovery">Realistic recovery and results</ArticleH2>
            <ArticleP>
              Mechanical microneedling typically produces 24&ndash;48 hours of pinkness and mild swelling, with makeup usually approved at 24 hours. RF microneedling, because of the heat, can produce 2&ndash;5 days of more visible redness and grid-pattern markings, and occasionally pinpoint crusting where the needles entered.
            </ArticleP>
            <ArticleP>
              Most patients see early texture changes within 2&ndash;4 weeks. Collagen remodeling is a longer story&mdash;final assessment is appropriate at three months for mechanical microneedling and three to six months for RF, and that is by design.
            </ArticleP>

            <ArticleH2 id="s-cost">Cost, sessions, and value framing</ArticleH2>
            <ArticleP>
              In the US market, single-session pricing for mechanical microneedling typically runs $200&ndash;$500 depending on add-ons and geography. RF microneedling sits higher, often $800&ndash;$1,800 per session, again with regional variance. Most providers will price a series at a meaningful discount&mdash;ask about a package before you commit to one session.
            </ArticleP>
            <ArticleP>
              The cost-per-result framing is the more useful one. A three-session RF series at $1,200 each is $3,600, and the right comparison is not a single facial&mdash;it is the procedure&rsquo;s actual six-month outcome compared to alternative options for the same concern.
            </ArticleP>

            <ArticleH2 id="s-ask">What to ask before you book</ArticleH2>
            <ol style={{ fontSize: 16.5, lineHeight: 1.72, color: P4.ink, paddingLeft: 22, margin: '12px 0' }}>
              <li style={{ marginBottom: 8 }}>Which device do you use, and what depth and energy settings will you use for me?</li>
              <li style={{ marginBottom: 8 }}>How many sessions do you recommend for my specific concern, and why?</li>
              <li style={{ marginBottom: 8 }}>What does the evidence say for my concern&mdash;texture, scarring, laxity?</li>
              <li style={{ marginBottom: 8 }}>What does &ldquo;done&rdquo; look like for me, and when will we evaluate?</li>
              <li style={{ marginBottom: 8 }}>Who supervises this procedure, and who will perform it?</li>
            </ol>

            <ArticleCallout kind="info" title="Bottom line">
              Microneedling and RF microneedling are not interchangeable. Choose based on the concern you most want to address: surface texture (mechanical) or laxity and depth (RF). Either way, ask for a treatment plan that names the protocol, the number of sessions, and the evaluation point.
            </ArticleCallout>

            {/* Citations */}
            <div style={{ marginTop: 56, paddingTop: 24, borderTop: `2px solid ${P4.ink}` }}>
              <MonoKicker_v4 mb={16}>References</MonoKicker_v4>
              <ol style={{ listStyle: 'none', padding: 0, margin: 0 }}>
                <Citation n={1}>Alster TS, Graham PM. Microneedling: A review and practical guide. Dermatol Surg. 2018;44(3):397-404.</Citation>
                <Citation n={2}>Hou A, Cohen B, Haimovic A, Elbuluk N. Microneedling: A comprehensive review. Dermatol Surg. 2017;43(3):321-339.</Citation>
                <Citation n={3}>Aust MC et al. Percutaneous collagen induction therapy: an alternative treatment for scars, wrinkles, and skin laxity. Plast Reconstr Surg. 2008;121(4):1421-1429.</Citation>
                <Citation n={4}>Hantash BM et al. Bipolar fractional radiofrequency treatment induces neoelastogenesis and neocollagenesis. Lasers Surg Med. 2009;41(1):1-9.</Citation>
                <Citation n={5}>Tan MG, Jo CE, Chapas A, Khetarpal S, Dover JS. Radiofrequency microneedling: A comprehensive and critical review. Dermatol Surg. 2021;47(6):755-761.</Citation>
              </ol>
            </div>

            {/* About this article */}
            <div style={{
              marginTop: 56, padding: 28,
              background: P4.surfaceCool, border: `1px solid ${P4.border}`, borderRadius: 12,
            }}>
              <MonoKicker_v4 mb={10}>About this article</MonoKicker_v4>
              <div style={{ fontFamily: FONT_SERIF, fontSize: 22, lineHeight: 1.35, color: P4.ink, fontWeight: 400, letterSpacing: '-0.012em', marginBottom: 14 }} className="balance">
                Researched, drafted, and reviewed before it ships.
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
                {[
                  { step: '01', label: 'Researched', body: 'Brief built from your clinic\u2019s positioning, top patient questions, and the highest-traffic SERPs for the topic.' },
                  { step: '02', label: 'Drafted',    body: 'Editorial-grade copy, written to your tone and your patient\u2019s level of literacy. No filler, no hedging, no over-claiming.' },
                  { step: '03', label: 'Reviewed',   body: 'Read line-by-line by a US-licensed physician in the relevant specialty. Anything unsupportable is rewritten or removed.' },
                ].map((s, i) => (
                  <div key={i}>
                    <div style={{ fontFamily: FONT_MONO, fontSize: 11, color: P4.warm, fontWeight: 600, letterSpacing: '0.1em', marginBottom: 6 }}>{s.step} · {s.label.toUpperCase()}</div>
                    <div style={{ fontSize: 13.5, lineHeight: 1.55, color: P4.inkMid }} className="pretty">{s.body}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 22, paddingTop: 18, borderTop: `1px solid ${P4.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
                <span style={{ fontFamily: FONT_MONO, fontSize: 11, color: P4.inkSoft, letterSpacing: '0.06em' }}>
                  $250 per article · physician review included · no clawbacks
                </span>
                <a href="/" style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  background: P4.accent, color: '#fff', textDecoration: 'none',
                  padding: '10px 18px', borderRadius: 8, fontSize: 13.5, fontWeight: 600,
                }}>Order one for your clinic →</a>
              </div>
            </div>
          </article>
        </div>
      </section>

      <Footer_v4 />
    </div>
  );
}
