(function () {
const { Button, Tag, Badge, Icon } = window.CarterSCritterCareDesignSystem_68e3fd;
const { useState } = React;
const CC = window.CC;

/* Pricing canonical - matches Home cards + Book form. */
const DETAIL = [
  { color: 'peach', doodle: 'DogWalk', title: 'Dog walking', price: '$40', priceUnit: '/ walk',
    desc: 'Everything in a drop-in visit, plus a good 20 to 30 minute leashed walk to stretch their legs and burn off the zoomies.',
    includes: ['Everything in a drop-in visit', '20 to 30 minute leashed walk', 'Fresh water & a clean-up after'] },
  { color: 'mint', doodle: 'DropIn', title: 'Drop-in visits', price: '$30', priceUnit: '/ visit',
    desc: 'I come to your home to feed, freshen up, and give your critters company while you are out.',
    includes: ['Feeding & fresh water', 'Litter / cage / tank tidy', 'Medication on schedule'] },
  { color: 'sky', doodle: 'Overnight', title: 'Overnight stays', price: '$80', priceUnit: '/ night',
    desc: 'I stay the night so your pets keep their routine and your home looks lived-in until you are back.',
    includes: ['Evening + morning care', 'A warm presence all night', 'Lights, blinds & mail'] },
  { color: 'butter', doodle: 'HouseCare', title: 'House & plant care', price: '$25', priceUnit: '/ visit',
    desc: 'Away with no pets? I keep your home happy and looking occupied while you roam.',
    includes: ['Plant watering', 'Mail & package pickup', 'Rotate lights & blinds'] },
];

function ServiceRow({ s, go }) {
  const Art = CC[s.doodle];
  return (
    <article className="svc-row">
      <div className={'svc-row__rail svc-row__rail--' + s.color}>
        <Art />
      </div>
      <div className="svc-row__body">
        <div className="svc-row__head">
          <h3>{s.title}</h3>
          <span className="svc-row__price">{s.price}<small> {s.priceUnit}</small></span>
        </div>
        <p>{s.desc}</p>
        <ul className="svc-row__list">
          {s.includes.map((it) => (
            <li key={it}><Icon name="check" />{it}</li>
          ))}
        </ul>
      </div>
      <div className="svc-row__cta">
        <Button variant="primary" arrow onClick={() => go('book', s.title)}>Ask about this</Button>
      </div>
    </article>
  );
}

function ServicesScreen({ go }) {
  const Paw = window.CCPaw;
  const Report = CC.ReportCard;
  const ReportDialog = window.CCReportDialog;
  const [showCard, setShowCard] = useState(false);
  return (
    <main>
      <section className="page-head">
        <div className="container">
          <span className="cc-eyebrow eyebrow-rule">Services &amp; pricing</span>
          <h1>Honest pricing,<br/>real care.</h1>
          <p className="page-head__lead">Flat, friendly rates for every kind of critter, anywhere in Whatcom County. Every booking starts with a free meet &amp; greet. Bundle visits or book recurring care for a kinder rate, just ask.</p>
          <div className="page-head__tags">
            <span className="sticker sticker--mint sticker--rot-l"><Icon name="coffee" /> Free meet &amp; greet</span>
            <span className="sticker sticker--sky"><Icon name="map-pin" /> All of Whatcom County</span>
            <span className="sticker sticker--peach sticker--rot-r"><Paw width="16" height="16" /> Exotics welcome</span>
          </div>
        </div>
      </section>

      <section className="section container">
        <div className="svc-rows">
          {DETAIL.map((s) => <ServiceRow key={s.title} s={s} go={go} />)}
        </div>
        <div className="svc-note">
          <span className="svc-note__icon"><Icon name="map-pin" /></span>
          <p><b>Outside Bellingham?</b> With gas prices what they are these days, there's a $5 fuel surcharge per visit. I'm still happy to travel anywhere in Whatcom County, from Lynden to Sumas, just ask.</p>
        </div>
      </section>

      {/* ── Daily report card - the star add-on ── */}
      <section className="section container">
        <div className="report">
          <div className="report__copy">
            <span className="cc-eyebrow eyebrow-rule is-coral">The add-on everyone keeps</span>
            <h2>The daily report card</h2>
            <p>Add it to any service and you'll never wonder how they're doing. After every visit I send a little card: photos and a few honest notes about your critter's day.</p>
            <ul className="report__list">
              <li><Icon name="camera" /> Real photos from every single visit</li>
              <li><Icon name="chat-circle" /> Notes on meals, meds, mood &amp; mischief</li>
              <li><Icon name="heart" /> Peace of mind the whole time you're away</li>
            </ul>
            <div className="report__price">
              <b>$5</b><span>/ day · add to any booking</span>
            </div>
            <div className="report__example">
              <Button variant="outline" arrow onClick={() => setShowCard(true)}>See a real example</Button>
            </div>
          </div>
          <div className="report__card">
            <div className="report__card-top">
              <span className="dot"><Paw width="20" height="20" style={{ color: 'var(--ink-900)' }} /></span>
              <div><b>Biscuit's day</b><br/><span>today · 4:12 pm</span></div>
            </div>
            <div className="report__card-photo"><Report /></div>
            <p className="report__card-note">ate every bite, took her pill in a treat, then claimed the sunny windowsill for two hours.</p>
            <div className="report__card-meta">
              <span className="report__chip">fed ✓</span>
              <span className="report__chip">meds ✓</span>
              <span className="report__chip report__chip--sky">walk ✓</span>
            </div>
          </div>
        </div>
      </section>

      {/* ── Also handled (no extra fee implied; just clarity) ── */}
      <section className="section--tight container">
        <div className="section__head section__head--center">
          <span className="cc-eyebrow eyebrow-rule is-blue" style={{ justifyContent: 'center' }}>Always included</span>
          <h2>The little things, handled</h2>
          <p>These come with your visits at no extra charge, just part of caring for the whole household.</p>
        </div>
        <div className="welcome__tags" style={{ justifyContent: 'center' }}>
          <Tag color="mint" icon={<Icon name="pill" />}>Medication</Tag>
          <Tag color="peach" icon={<Icon name="bathtub" />}>Litter &amp; clean-up</Tag>
          <Tag color="butter" icon={<Icon name="plant" />}>Plant watering</Tag>
          <Tag color="sky" icon={<Icon name="envelope-simple" />}>Mail pickup</Tag>
          <Tag color="cream" icon={<Icon name="house-line" />}>Lights &amp; blinds</Tag>
        </div>
      </section>

      <section className="container">
        <div className="cta">
          <div className="cta__copy">
            <span className="cc-eyebrow eyebrow-rule on-ink">Not sure what you need?</span>
            <h2>Tell me about your critters.</h2>
            <p>Send a quick note and I'll put together a simple plan and price for your trip, wherever you are in Whatcom County.</p>
          </div>
          <div className="cta__action">
            <Button variant="sticker" size="lg" arrow onClick={() => go('book')}>Connect with Carter</Button>
            <span className="aside-hand">I'll keep it simple</span>
          </div>
          <div className="cta__paws" aria-hidden="true"><Paw width="30" height="30" /><Paw width="30" height="30" /><Paw width="30" height="30" /></div>
        </div>
      </section>

      <ReportDialog open={showCard} onClose={() => setShowCard(false)} />
    </main>
  );
}

window.ServicesScreen = ServicesScreen;
})();