// pricing.jsx — pricing tiers + process

function Pricing() {
  return (
    <section className="section" id="pricing" data-screen-label="04 Pricing">
      <div className="kicker-row reveal">
        <span className="num">04 — WHAT TO EXPECT</span>
      </div>
      <h2 className="h-section reveal">
        On rates, time,<br/>
        <em className="h-italic">and care.</em>
      </h2>
      <p className="lede reveal" style={{ marginTop: 32 }}>
        Pricing is honest, time-based, and quoted before the needle.
      </p>

      <div className="pricing-grid reveal-stagger">
        <div className="pricing-card">
          <span className="pricing-card__num">i</span>
          <span className="pricing-card__tier">Tier · 01</span>
          <h3 className="pricing-card__title">The <em>Small.</em></h3>
          <p className="pricing-card__body">
            A single sitting. Fine line, micro pieces, simple iconography.
            Quoted flat, drawn in the morning, finished by lunch.
          </p>
          <div className="pricing-card__price">
            <small>From</small>
            $280 — $480 · flat
          </div>
        </div>

        <div className="pricing-card">
          <span className="pricing-card__num">ii</span>
          <span className="pricing-card__tier">Tier · 02</span>
          <h3 className="pricing-card__title">The <em>Considered.</em></h3>
          <p className="pricing-card__body">
            Half-day to a full session. Botanical, ornamental, mid-scale
            blackwork. One consultation, one sitting, drawn to the limb.
          </p>
          <div className="pricing-card__price">
            <small>Hourly</small>
            $220 / hr · 3—6h
          </div>
        </div>

        <div className="pricing-card">
          <span className="pricing-card__num">iii</span>
          <span className="pricing-card__tier">Tier · 03</span>
          <h3 className="pricing-card__title">The <em>Long Work.</em></h3>
          <p className="pricing-card__body">
            Sleeves, back pieces, multi-session compositions. Begins with a
            studio visit. Progresses across weeks, sometimes seasons.
          </p>
          <div className="pricing-card__price">
            <small>Day rate</small>
            $1,650 / day · est.
          </div>
        </div>
      </div>

      <div className="process">
        <div className="reveal">
          <span className="eyebrow">The process</span>
          <h3 className="h-section" style={{ fontSize: "clamp(32px, 4vw, 56px)", marginTop: 16 }}>
            Five quiet<br/>
            <em className="h-italic">movements.</em>
          </h3>
          <p className="body" style={{ maxWidth: "32ch", marginTop: 24 }}>
            From the first email to the final aftercare check, every booking
            follows the same unhurried rhythm.
          </p>
        </div>

        <div className="process__list reveal-stagger">
          <div className="process__step">
            <div className="process__step-num">01</div>
            <div>
              <h4 className="process__step-title">Inquiry</h4>
              <p className="process__step-body">
                A short form. Reference, placement, scale. We respond within five days, or not at all.
              </p>
            </div>
          </div>
          <div className="process__step">
            <div className="process__step-num">02</div>
            <div>
              <h4 className="process__step-title">Consultation</h4>
              <p className="process__step-body">
                Twenty minutes, in studio or by call. We refine the idea and confirm we&rsquo;re the right hands.
              </p>
            </div>
          </div>
          <div className="process__step">
            <div className="process__step-num">03</div>
            <div>
              <h4 className="process__step-title">Drawing</h4>
              <p className="process__step-body">
                A $150 deposit holds your date. Drawn the morning of &mdash; never weeks before.
              </p>
            </div>
          </div>
          <div className="process__step">
            <div className="process__step-num">04</div>
            <div>
              <h4 className="process__step-title">The sitting</h4>
              <p className="process__step-body">
                Tea, low music, single-use everything. Breaks when you ask. Always.
              </p>
            </div>
          </div>
          <div className="process__step">
            <div className="process__step-num">05</div>
            <div>
              <h4 className="process__step-title">Aftercare</h4>
              <p className="process__step-body">
                Written aftercare, a salve, and a check-in at two weeks. Touch-ups within the year are free.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;