(function () {
const { Button, ServiceCard, Tag, Card, Icon } = window.CarterSCritterCareDesignSystem_68e3fd;
const CC = window.CC;

/* Four core services - pricing is canonical (matches Services + Book). */
const SERVICES = [
  { color: 'peach',  doodle: 'DogWalk',   title: 'Dog walking',        description: 'A drop-in visit plus a 20 to 30 minute neighborhood walk.', price: '$40', priceUnit: '/ walk' },
  { color: 'mint',   doodle: 'DropIn',    title: 'Drop-in visits',     description: 'Feeding, litter, meds, and plenty of cuddles.',          price: '$30', priceUnit: '/ visit' },
  { color: 'sky',    doodle: 'Overnight', title: 'Overnight stays',    description: 'A calm, familiar presence in your home all night.',      price: '$80', priceUnit: '/ night' },
  { color: 'butter', doodle: 'HouseCare', title: 'House & plant care', description: 'Plants watered, mail in, lights on while you roam.',      price: '$25', priceUnit: '/ visit' },
];

window.CCData = { SERVICES };

function HomeScreen({ go }) {
  const Paw = window.CCPaw;
  return (
    <main>
      {/* ── Hero ── */}
      <section className="hero">
        <div className="container hero__grid">
          <div className="hero__copy">
            <span className="cc-eyebrow eyebrow-rule reveal reveal-1"><Paw width="16" height="16" /> Carter's Critter Care · Whatcom County, WA</span>
            <h1 className="hero__title reveal reveal-2">A lifetime of comfort<br/><span className="squiggle text-brand">for every critter</span></h1>
            <p className="hero__lead reveal reveal-3">Loving, reliable pet &amp; house sitting from a neighbor you can trust, anywhere in Whatcom County. From goldfish to great Danes, reptiles to rabbits, I treat your home and your animals like my own.</p>
            <div className="hero__actions reveal reveal-4">
              <Button variant="sticker" size="lg" arrow onClick={() => go('book')}>Connect with Carter</Button>
              <Button variant="outline" size="lg" onClick={() => go('services')}>See services &amp; pricing</Button>
            </div>
            <div className="hero__facts reveal reveal-5">
              <div className="hero__fact"><Paw width="30" height="30" style={{ color: 'var(--green-500)' }} /><div><b>Every critter</b><span>furry, scaly &amp; small</span></div></div>
              <div className="hero__fact"><Icon name="map-pin" size="26px" style={{ color: 'var(--blue-500)' }} /><div><b>All of Whatcom</b><span>Bellingham to Blaine</span></div></div>
              <div className="hero__fact"><Icon name="camera" size="26px" style={{ color: 'var(--coral)' }} /><div><b>Report cards</b><span>photos every visit</span></div></div>
            </div>
          </div>

          <div className="hero__art reveal reveal-3">
            <span className="hero__tape" aria-hidden="true"></span>
            <figure className="hero__polaroid">
              <img src="/design-system/assets/carter-hero2.jpg" alt="Carter outdoors with a cat, a puppy, and a bearded dragon" />
              <figcaption>your critters, in good hands</figcaption>
            </figure>
            <span className="sticker sticker--coral hero__sticker hero__sticker--report"><Icon name="camera" /> daily report card</span>
            <span className="sticker sticker--mint hero__sticker hero__sticker--crew"><Icon name="heart" /> exotics welcome</span>
            <span className="sticker sticker--sky hero__sticker hero__sticker--area">Whatcom County, WA</span>
          </div>
        </div>
      </section>

      <hr className="scallop" style={{ '--scallop-fill': 'var(--cream-50)' }} aria-hidden="true" />

      {/* ── Services ── */}
      <section className="band-cream">
        <div className="section container">
          <div className="section__head">
            <div>
              <span className="cc-eyebrow eyebrow-rule">What I offer</span>
              <h2>Care for the whole household</h2>
              <p>Four simple services, honest flat prices. Mix and match for your trip. Every booking starts with a free meet &amp; greet.</p>
            </div>
            <Button variant="ghost" arrow onClick={() => go('services')}>All services &amp; pricing</Button>
          </div>
          <div className="svc-grid">
            {SERVICES.map((s) => {
              const Art = CC[s.doodle];
              return (
                <ServiceCard
                  key={s.title}
                  color={s.color}
                  title={s.title}
                  description={s.description}
                  price={s.price}
                  priceUnit={s.priceUnit}
                  icon={<Art />}
                  href="#"
                  onClick={(e) => { e.preventDefault(); go('services'); }}
                />
              );
            })}
          </div>
        </div>
      </section>

      <hr className="scallop scallop--up" style={{ '--scallop-fill': 'var(--cream-50)' }} aria-hidden="true" />

      {/* ── Everyone's welcome ── */}
      <section className="section container">
        <div className="welcome">
          <div className="welcome__copy">
            <span className="cc-eyebrow eyebrow-rule is-blue">Big, small, furry &amp; scaly</span>
            <h2>Your critters are welcome here</h2>
            <p>I've looked after just about everything Whatcom County keeps. If they wag, purr, hop, slither, or swim, they're in good hands with me.</p>
          </div>
          <div className="welcome__tags">
            <Tag color="peach" icon={<Icon name="dog" />}>Dogs</Tag>
            <Tag color="mint" icon={<Icon name="cat" />}>Cats</Tag>
            <Tag color="berry" icon={<Icon name="rabbit" />}>Rabbits &amp; rodents</Tag>
            <Tag color="butter" icon={<Icon name="bird" />}>Birds</Tag>
            <Tag color="sky" icon={<Icon name="fish-simple" />}>Fish &amp; reptiles</Tag>
            <Tag color="cream" icon={<Paw width="16" height="16" />}>Spiders &amp; bugs</Tag>
          </div>
        </div>
      </section>

      {/* ── About strip ── */}
      <section className="section container">
        <div className="about-strip">
          <div className="about-strip__photo">
            <img src="/design-system/assets/carter-portrait.jpg" alt="Carter outdoors in Whatcom County" />
            <span className="sticker sticker--cream">Hi, I'm Carter</span>
          </div>
          <div className="about-strip__copy">
            <span className="cc-eyebrow eyebrow-rule">A neighbor, not a corporation</span>
            <h3>Washington born, and a lifelong animal person.</h3>
            <p>I've been pet and house sitting for almost ten years, and these days I'm an Environmental Science student at WWU living right in Bellingham. I treat your home and your critters exactly like my own: same patience, same attention, same clean-up.</p>
            <Button variant="secondary" arrow onClick={() => go('about')}>My story &amp; my crew</Button>
          </div>
        </div>
      </section>

      {/* ── CTA ── */}
      <section className="container">
        <div className="cta">
          <div className="cta__copy">
            <span className="cc-eyebrow eyebrow-rule on-ink">Going away soon?</span>
            <h2>Let's set up a free meet &amp; greet.</h2>
            <p>We'll say hello, I'll meet your critters and learn their routines, and you'll head off knowing they're truly in good hands.</p>
          </div>
          <div className="cta__action">
            <Button variant="sticker" size="lg" arrow onClick={() => go('book')}>Connect with Carter</Button>
            <span className="aside-hand">no payment to say hi</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>
    </main>
  );
}

window.HomeScreen = HomeScreen;
})();