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

/* Genuine, verifiable values only - no insurance/certification claims. */
const VALUES = [
  { icon: 'heart', bg: 'var(--coral-soft)', title: 'Real affection', text: 'Your pets get genuine company and cuddles, not a rushed checklist. I actually like hanging out with them.' },
  { icon: 'camera', bg: 'var(--sky)', title: 'Always in the loop', text: 'Add the daily report card and you get a photo and honest note after every visit, so you never have to wonder.' },
  { icon: 'paw', bg: 'var(--mint)', title: 'Exotics, no problem', text: 'I keep tarantulas, geckos, a tree frog and a corn snake myself. Tanks, humidity and fussy eaters are my normal.' },
  { icon: 'map-pin', bg: 'var(--butter)', title: 'Whatcom local', text: 'I live in Bellingham and cover the whole county: Ferndale to Blaine, Lynden to Deming. I know the trails, the parks and the weather.' },
  { icon: 'house-line', bg: 'var(--green-200)', title: 'Home, looked after', text: 'Plants watered, mail in, lights and blinds rotated. Your place stays happy and looks lived-in while you roam.' },
  { icon: 'coffee', bg: 'var(--peach)', title: 'Easy to start', text: 'Every booking opens with a free, no-pressure meet & greet so we (and your critters) can say hello first.' },
];

function ValueCard({ v }) {
  const isPaw = v.icon === 'paw';
  const Paw = window.CCPaw;
  return (
    <article className="value" style={{ '--value-bg': v.bg }}>
      <span className="value__icon">{isPaw ? <Paw width="28" height="28" style={{ color: 'var(--ink-900)' }} /> : <Icon name={v.icon} />}</span>
      <h3>{v.title}</h3>
      <p>{v.text}</p>
    </article>
  );
}

/* Carter's real crew - the exotic-care credibility centerpiece.
   Photos: openly licensed, species-verified (see assets/crew/CREDITS.md). */
const CREW_IMG = (k) => '/design-system/assets/crew/' + k + '.jpg';
const CREW = [
  { key: 'bella',doodle: 'DogWalk',    bg: 'var(--sky)',       common: 'Bella',                            latin: 'Australian shepherd', group: 'd', note: 'the welcome committee' },
  { key: 'lp',   doodle: 'Tarantula',  bg: 'var(--berry)',     common: 'Brazilian salmon pink birdeater', latin: 'Lasiodora parahybana', count: '×6', group: 't', note: 'the gentle giant' },
  { key: 'ac',   doodle: 'Tarantula',  bg: 'var(--peach)',     common: 'Arizona blonde',                   latin: 'Aphonopelma chalcodes', group: 't' },
  { key: 'be',   doodle: 'Tarantula',  bg: 'var(--coral-soft)',common: 'Mexican red-leg',                  latin: 'Brachypelma emilia', group: 't' },
  { key: 'ls',   doodle: 'Tarantula',  bg: 'var(--butter)',    common: 'Peruvian golden-stripe',           latin: 'Lasiodorides striatus', group: 't' },
  { key: 'hk',   doodle: 'Tarantula',  bg: 'var(--mint)',      common: 'Pumpkin patch',                    latin: 'Hapalopus sp. "Klein"', group: 't', note: 'tiny & dazzling' },
  { key: 'ni',   doodle: 'Tarantula',  bg: 'var(--sky)',       common: 'Trinidad olive',                   latin: 'Neoholothele incei', group: 't' },
  { key: 'leo',  doodle: 'Gecko',      bg: 'var(--butter)',    common: 'Leopard geckos',                   latin: 'Eublepharis macularius', count: '×2', group: 'g' },
  { key: 'viper',doodle: 'ViperGecko', bg: 'var(--peach)',     common: 'Viper gecko',                      latin: 'Hemidactylus imbricatus', group: 'g' },
  { key: 'frog', doodle: 'Frog',       bg: 'var(--green-200)', common: "White's tree frog",                latin: 'Ranoidea caerulea', group: 'a', note: 'always smiling' },
  { key: 'corn', doodle: 'Snake',      bg: 'var(--coral-soft)',common: 'Corn snake',                       latin: 'Pantherophis guttatus', group: 'r' },
  { key: 'crab', doodle: 'HermitCrab', bg: 'var(--sky)',       common: 'Hermit crab',                      latin: 'Coenobita sp.', group: 'i' },
  { key: 'iso',  doodle: 'Isopod',     bg: 'var(--mint)',      common: 'Isopods',                          latin: 'three species & counting', count: '3+', group: 'i', note: 'the cleanup crew' },
  { key: 'snail',doodle: 'Snail',      bg: 'var(--green-200)', common: 'Aquatic snails',                   latin: 'Neritina & friends', group: 'i' },
].map((c) => Object.assign({}, c, { img: CREW_IMG(c.key) }));

function CrewCard({ c, n }) {
  const Art = CC[c.doodle];
  return (
    <article className="specimen" style={{ '--specimen-bg': c.bg }}>
      <div className={'specimen__art' + (c.img ? ' specimen__art--photo' : '')}>
        <span className="specimen__no">{('0' + n).slice(-2)}</span>
        {c.count ? <span className="specimen__count">{c.count}</span> : null}
        {c.img ? <img src={c.img} alt={c.common} loading="lazy" /> : <Art />}
      </div>
      <div className="specimen__plate">
        <h3 className="specimen__common">{c.common}</h3>
        <p className="specimen__latin">{c.latin}</p>
        {c.note ? <p className="specimen__note">{c.note}</p> : null}
      </div>
    </article>
  );
}

function AboutScreen({ go }) {
  const Paw = window.CCPaw;
  return (
    <main>
      <section className="about-hero">
        <div className="container about-hero__grid">
          <div className="about-hero__photo">
            <span className="about-hero__tape" aria-hidden="true"></span>
            <figure className="about-hero__frame">
              <img src="/design-system/assets/carter-portrait.jpg" alt="Carter outdoors against a mossy Pacific-Northwest tree" />
              <figcaption>me, in my natural habitat</figcaption>
            </figure>
            <span className="sticker sticker--mint about-hero__sticker cc-hand" style={{ fontSize: '20px' }}>lifelong animal person</span>
          </div>
          <div className="about-hero__copy">
            <span className="cc-eyebrow eyebrow-rule">Meet your sitter</span>
            <h1>Hi, I'm Carter.</h1>
            <p className="about-hero__lead">I'm a lifelong animal person, born and raised in Washington State, and I look after critters and homes across Whatcom County like they're my own.</p>
            <p>I grew up in a house full of pets: dogs, guinea pigs, spiders, bugs, and steadily more reptiles than my mom would've liked. Caring for animals has always come naturally, and I've been the neighbor people call for pet and house sitting for almost ten years now.</p>
            <p>These days I live in Bellingham, where I'm studying Environmental Science at Western Washington University. Carter's Critter Care is the natural next step: thoughtful, reliable sitting for every kind of animal, plus the little house things (plants, mail, lights) that keep your home happy while you're away.</p>
            <p className="cc-hand about-hero__sig">Carter</p>
            <div className="about-hero__actions">
              <Button variant="sticker" arrow onClick={() => go('book')}>Connect with Carter</Button>
              <Button variant="ghost" arrow onClick={() => go('services')}>See services</Button>
            </div>
          </div>
        </div>
      </section>

      <section className="section container">
        <div className="section__head section__head--center">
          <span className="cc-eyebrow eyebrow-rule" style={{ justifyContent: 'center' }}>How I care</span>
          <h2>What you can count on</h2>
          <p>No fine print, no fluff. Just the things that actually matter when you hand someone your keys and your critters.</p>
        </div>
        <div className="values">
          {VALUES.map((v) => <ValueCard key={v.title} v={v} />)}
        </div>
      </section>

      {/* ── THE CREW: field-guide specimen wall ── */}
      <section className="crew">
        <div className="container">
          <div className="crew__head">
            <span className="cc-eyebrow eyebrow-rule is-coral" style={{ justifyContent: 'center' }}>Why exotics don't scare me</span>
            <h2>Meet my own crew</h2>
            <p>Here's who lives at my place. An Australian shepherd, six tarantula species, a few geckos, a tree frog, a corn snake, and a tankful of tiny cleanup critters. If I keep these happy and thriving, your goldfish, hamster, or beardie is in very good hands.</p>
            <div className="crew__legend">
              <span className="sticker sticker--sky sticker--rot-r"><Paw width="16" height="16" /> 1 good dog</span>
              <span className="sticker sticker--peach sticker--rot-l"><Paw width="16" height="16" /> 6 tarantulas</span>
              <span className="sticker sticker--butter"><Paw width="16" height="16" /> 3 geckos</span>
              <span className="sticker sticker--green sticker--rot-r">1 tree frog</span>
              <span className="sticker sticker--coral">1 corn snake</span>
              <span className="sticker sticker--sky sticker--rot-l">isopods &amp; snails</span>
            </div>
          </div>
          <div className="crew__grid">
            {CREW.slice(0, 6).map((c, i) => <CrewCard key={c.key} c={c} n={i + 1} />)}
            <div className="crew__pitch">
              <span className="cc-eyebrow eyebrow-rule on-ink">The whole point</span>
              <h3>Exotics genuinely welcome.</h3>
              <p>Tarantulas, geckos and a snake of my own means tanks, humidity, molts and fussy feeders don't faze me one bit. Whatever lives at your house, I've probably cared for its cousin.</p>
              <p className="aside-hand">p.s. I really do love reptiles</p>
            </div>
            {CREW.slice(6).map((c, i) => <CrewCard key={c.key} c={c} n={i + 7} />)}
          </div>
        </div>
      </section>

      <section className="container section-gap-top">
        <div className="cta">
          <div className="cta__copy">
            <span className="cc-eyebrow eyebrow-rule on-ink">Let's meet</span>
            <h2>Coffee, then I'll meet your critters.</h2>
            <p>The best way to start is a free, no-pressure meet &amp; greet anywhere in Whatcom County. Let's find a time.</p>
          </div>
          <div className="cta__action">
            <Button variant="sticker" size="lg" arrow onClick={() => go('book')}>Connect with Carter</Button>
            <span className="aside-hand">bring the whole zoo</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.AboutScreen = AboutScreen;
})();