// site/PageParts.jsx — shared parts for interior pages
const IMG_EVENTS = 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?w=1200&q=80&auto=format&fit=crop';
const IMG_INCENTIVE = 'https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?w=1600&q=80&auto=format&fit=crop';
const IMG_INNOVATION = 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1200&q=80&auto=format&fit=crop';
const IMG_HOSPITALITY = 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=1200&q=80&auto=format&fit=crop';

function PageHero({ crumb, title, lead, facts, image, periodAfter }) {
  return (
    <section className="page-hero">
      <div className="container">
        <div className="inner">
          <div>
            <div className="crumb">{crumb}</div>
            <h1>{title}<span className="period">.</span></h1>
            <p className="lead">{lead}</p>
          </div>
          <div className="side">
            <div className="media"><img src={image} alt="" /></div>
            {facts && (
              <div className="factstack">
                {facts.map((f, i) => (
                  <div className="fact" key={i}>
                    <div className="num">{f.num}<span className="period">.</span></div>
                    <div className="lbl">{f.lbl}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Offerings({ eyebrow, title, intro, items }) {
  const twoUp = items.length === 2;
  return (
    <section className="offerings">
      <div className="container">
        <div className="offerings-head">
          <span className="eyebrow-row"><span className="bar" />{eyebrow}</span>
          <h2>{title}<span className="period">.</span></h2>
          {intro && <p>{intro}</p>}
        </div>
        <div className={`offerings-grid ${twoUp ? 'two-up' : ''}`}>
          {items.map((it, i) => {
            const Tag = it.href ? 'a' : 'div';
            const props = it.href ? { href: it.href } : {};
            return (
              <Tag className={`offering ${it.href ? 'offering-link' : ''}`} key={i} {...props}>
                <span className="idx">0{i + 1}</span>
                <h3>{it.title}{it.href && <span className="arr"> ›</span>}<span className="period">.</span></h3>
                <p>{it.copy}</p>
                {it.tags && (
                  <ul className="tags">{it.tags.map(t => <li key={t}>{t}</li>)}</ul>
                )}
              </Tag>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ProcessStrip({ eyebrow, title, intro, steps }) {
  return (
    <section className="process">
      <div className="container">
        <div className="process-head">
          <div>
            <span className="eyebrow-row" style={{ color: 'rgba(249,247,216,0.7)' }}><span className="bar" />{eyebrow}</span>
            <h2>{title}<span className="period">.</span></h2>
          </div>
          {intro && <p className="process-intro">{intro}</p>}
        </div>
        <div className="process-list">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="n">{String(i + 1).padStart(2, '0')}</div>
              <h4>{s.title}</h4>
              <p>{s.copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeatureRow({ eyebrow, title, copy, checks, image, reverse, cta }) {
  return (
    <section className={`feature-row ${reverse ? 'reverse' : ''}`}>
      <div className="container">
        <div className="inner">
          <div>
            <span className="eyebrow-row"><span className="bar" />{eyebrow}</span>
            <h2>{title}<span className="period">.</span></h2>
            <p>{copy}</p>
            {checks && <ul className="check">{checks.map(c => <li key={c}>{c}</li>)}</ul>}
            {cta && <a href={cta.href} className="btn btn-primary" style={{ marginTop: 28 }}>{cta.label}</a>}
          </div>
          <div className="media"><img src={image} alt="" /></div>
        </div>
      </div>
    </section>
  );
}

function Gallery({ title, tiles }) {
  return (
    <section className="gallery">
      <div className="container">
        <span className="eyebrow-row"><span className="bar" />Where we go</span>
        <h2>{title}<span className="period">.</span></h2>
        <div className="gallery-grid">
          {tiles.map((t, i) => (
            <div className={`gallery-tile ${t.size}`} key={i}>
              <img src={t.img} alt="" />
              <div className="cap"><span className="region">{t.region}</span>{t.name}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PageCTA({ title, copy, primary, secondary, primaryHref, secondaryHref, noPeriod }) {
  return (
    <section className="pg-cta">
      <div className="container">
        <div className="inner">
          <div>
            <h2>{title}{!noPeriod && <span className="period">.</span>}</h2>
            {copy && <p>{copy}</p>}
          </div>
          <div className="ctas">
            <a className="btn btn-primary" href={primaryHref || 'contact.html'}>{primary} <span className="btn-arrow">›</span></a>
            {secondary && <a className="btn btn-ghost" href={secondaryHref || '#'}>{secondary}</a>}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PageHero, Offerings, ProcessStrip, FeatureRow, Gallery, PageCTA, IMG_EVENTS, IMG_INCENTIVE, IMG_INNOVATION, IMG_HOSPITALITY });