/* global React, Photo, Eyebrow, Rule, SectionNum, asset */

function PortfolioHeader() {
  return (
    <header className="page-header page-header--wide">
      <div className="page-header__inner">
        <Eyebrow center>The Galleries</Eyebrow>
        <h1 className="kit-headline kit-headline--xl headline-oneline" style={{ margin: '32px 0 24px' }}>
          an <span className="stroke">archive</span> of <em>my work.</em>
        </h1>
        <Rule center />
        <p className="kit-lede page-lede page-lede--center">
          Click any collection to see more of my selected work from
          weddings, engagements, lifestyle, and even some travel.
        </p>
      </div>
    </header>
  );
}

function CategoryCard({ src, tone, title, span = 1, slug, onNav }) {
  const titleParts = title.split(' ');
  const italicWord = titleParts[titleParts.length - 1];
  const rest = titleParts.slice(0, -1).join(' ');

  return (
    <a className="cat-card" href={`#gallery/${slug}`} onClick={(e) => { e.preventDefault(); onNav(`gallery/${slug}`); }} style={span === 2 ? { gridColumn: 'span 2' } : null}>
      <div
        className={`cat-card__photo kit-photo ${src ? 'kit-photo--has-img' : `kit-photo--${tone}`}`}
        style={span === 2 ? { aspectRatio: '5/3' } : null}
      >
        {src ? <img src={asset(src)} alt={title} className="kit-photo__img" /> : null}
      </div>
      <div className="cat-card__caption">
        <h3 className="cat-card__title">{rest} <em>{italicWord}</em></h3>
        <span className="cat-card__meta">View Gallery</span>
      </div>
    </a>
  );
}

function CategoriesGrid({ onNav }) {
  return (
    <div className="cat-grid">
      <CategoryCard slug="weddings"    onNav={onNav} src="assets/ahp-photos/Galleries/Weddings/AHP-1313.jpg"      title="The Weddings" />
      <CategoryCard slug="engagements" onNav={onNav} src="assets/ahp-photos/portfolio-engagements.jpg"           title="The Engagements" />
      <CategoryCard slug="families"    onNav={onNav} src="assets/ahp-photos/portfolio-family.jpg"                title="The Families" />
      <CategoryCard slug="travel"      onNav={onNav} src="assets/ahp-photos/portfolio-travel.jpg"                 title="The Travel" />
    </div>
  );
}

function PortfolioStrip() {
  // A tight thumbnail river of recent moments
  const tiles = [
    { src: 'assets/ahp-photos/this-year-1.jpg', name: 'Ki & Madeline' },
    { src: 'assets/ahp-photos/this-year-2.jpg', name: 'Scott & Amanda' },
    { src: 'assets/ahp-photos/this-year-3.jpg', name: 'The Marsh Family' },
    { src: 'assets/ahp-photos/this-year-4.jpg', name: 'Luke & Mackenzie' },
    { src: 'assets/ahp-photos/this-year-5.jpg', name: 'The Van Booven Family' },
    { src: 'assets/ahp-photos/this-year-6.jpg', name: 'Jack & Katie' },
    { src: 'assets/ahp-photos/this-year-7.jpg', name: 'Grant & Sydney' },
    { src: 'assets/ahp-photos/this-year-8.jpg', name: 'Emma Kate' },
  ];
  return (
    <section className="strip">
      <div className="wrap">
        <div style={{ marginBottom: 'clamp(36px, 5vw, 64px)' }}>
          <Eyebrow>Recently in the Reel</Eyebrow>
          <h2 className="kit-headline kit-headline--md" style={{ marginTop: 20, maxWidth: 520 }}>
            A small <em>scrapbook</em> of last season.
          </h2>
        </div>
        {/* Names sit under the frame, not over it — same treatment as the
            home grid, and the reason the covers lost their overlays. */}
        <div className="strip__grid">
          {tiles.map((t, i) => (
            <figure className="strip__tile" key={i}>
              <Photo src={t.src} aspect="3/4" />
              <figcaption className="strip__name">{t.name}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function PortfolioPage({ onNav }) {
  return (
    <React.Fragment>
      <PortfolioHeader />
      <CategoriesGrid onNav={onNav} />
      <PortfolioStrip />
      <CTABand onNav={onNav} title={<>Wandering & <em>still curious?</em></>} body="Tell me a little about what you're hoping to capture. I'll reach back out with a personalized investment guide, session expectations, and a few words on how I work." />
    </React.Fragment>
  );
}

/* Reusable CTA band — defined here, used across pages.
   secondary: show the "Meet Abby First" ghost button (off on the About page). */
function CTABand({ onNav, title, body, primaryLabel = 'Inquire Now', primaryTarget = 'contact', secondary = true }) {
  return (
    <section className="cta-band">
      <div className="cta-band__pattern" />
      <div className="cta-band__inner">
        <img src={asset("assets/ahp-logo/Symbol-clay.png")} alt="" className="cta-band__mark" />
        <h2 className="kit-headline kit-headline--lg" style={{ marginBottom: 24 }}>{title}</h2>
        <hr className="kit-rule kit-rule--center" />
        <p className="kit-lede" style={{ margin: '0 auto 40px', fontSize: 15 }}>{body}</p>
        <div className="cta-band__actions">
          <button className="kit-btn kit-btn--primary kit-btn--lg" onClick={() => onNav(primaryTarget)}>
            {primaryLabel}
          </button>
          {secondary && (
            <button className="kit-btn kit-btn--ghost" onClick={() => onNav('about')}>
              Meet Abby First
            </button>
          )}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PortfolioPage, CTABand });