// InfoPage — /about me. Short + confident. Housesitting is the primary
// CTA; photography surfaces implicitly through the feed.
//
// Research-informed structure (trust_conversion.md):
//   - Lead with service + location + proof (not poetry).
//   - Email prominent (not buried in a <dl>).
//   - TODOs stay commented-out — absence beats placeholder.
//
// Motion grammar (docs/adr/0001-info-page-motion-grammar.md):
//   - Hero name reveals per-letter (type-laying cascade, --i stagger index).
//   - Brief desc, biography, contact each block-fade with sequential delays.
//   - Below-fold AllReviews uses its own IntersectionObserver per-element.

const InfoPage = () => {
  // Per-letter spans for the hero name carry a CSS variable `--i` that
  // drives animation-delay, so the cascade reads left-to-right without
  // per-letter selectors. The h1 itself carries an aria-label so screen
  // readers say "Dylan Agema" once instead of spelling 10 letters.
  return (
    <article className="info-page info-page--editorial">
      {/* Aristide-style hero — massive display identifier left-aligned,
          concise bio underneath in mono-caps. Sets a strong editorial
          tone on first paint. */}
      <header className="info-page__hero">
        <h1 className="info-page__hero-id" aria-label="Dylan Agema">
          <span className="info-page__hero-id-line">
            {'DYLAN'.split('').map((ch, i) => (
              <span
                key={`d-${i}`}
                className="info-page__hero-id-char"
                style={{ '--i': i }}
                aria-hidden="true"
              >{ch}</span>
            ))}
          </span>
          <span className="info-page__hero-id-line">
            {'AGEMA'.split('').map((ch, i) => (
              <span
                key={`a-${i}`}
                className="info-page__hero-id-char"
                style={{ '--i': i + 5 }}
                aria-hidden="true"
              >{ch}</span>
            ))}
          </span>
        </h1>
        <p className="info-page__hero-bio mono-caps">
          HOUSE AND DOG SITTER BASED IN BOULDER, COLORADO.<br/>
          PHOTOGRAPHER AND ML ENGINEER.
        </p>
      </header>

      <section className="info-page__section info-page__biography">
        {/* TODO: biography paragraph */}
      </section>

      <section className="info-page__section info-page__contact">
        <p className="info-page__contact-line">
          <a href="mailto:dylan.agema@gmail.com" className="info-page__contact-email">
            dylan.agema@gmail.com
          </a>
          <span className="info-page__contact-sep">·</span>
          <a
            href="https://www.trustedhousesitters.com/house-and-pet-sitters/united-states/colorado/boulder/l/2277339/"
            target="_blank" rel="noopener noreferrer"
            className="link"
          >
            view on trustedhousesitters →
          </a>
        </p>
      </section>

      <AllReviews />
    </article>
  );
};

window.InfoPage = InfoPage;