// site-content.jsx, B+ Portfolio · Journal index · Journal post
function BPortfolio() {
  const p = SSX.portfolio;

  // Interleave real gallery photos so categories mix naturally.
  // Categories without a real pack yet fall back to stock placeholders.
  const g = window.SS_GALLERY || {};
  const wed = (g.weddings || []).map((img) => ({ ...img, cat: 'Weddings' }));
  const rec = (g.receptions || []).map((img) => ({ ...img, cat: 'Receptions' }));
  const bday = (g.birthdays || []).map((img) => ({ ...img, cat: 'Birthdays' }));
  const realItems = [];
  const maxLen = Math.max(wed.length, rec.length, bday.length);
  for (let i = 0; i < maxLen; i++) {
    if (wed[i]) realItems.push(wed[i]);
    if (rec[i]) realItems.push(rec[i]);
    if (bday[i]) realItems.push(bday[i]);
  }
  const galleryItems = realItems.length ? realItems : p.items;

  const serviceLinks = [
    { label: 'Weddings', route: 'weddings' },
    { label: 'Engagement Parties', route: 'engagement' },
    { label: 'Corporate Events', route: 'corporate' },
    { label: 'Baby Showers', route: 'baby-showers' },
    { label: 'Receptions', route: 'receptions' },
    { label: 'Birthday Celebrations', route: 'birthdays' },
  ];

  return (
    <div className="db bx" data-screen-label="Portfolio">
      <BTopbar />
      <BNav active="Portfolio" />
      <BXHero eyebrow="Our Work" h1={p.h1} intro={p.intro} tight={true}>
        <nav className="bx-svc-links" aria-label="Services">
          {serviceLinks.map((s) => (
            <a key={s.route} href={'#/' + s.route} className="svc-link">
              <span>{s.label}</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
            </a>
          ))}
        </nav>
      </BXHero>

      <section className="db-sec" style={{ paddingTop: 0 }}>
        <div className="bx-masonry">
          {galleryItems.map((it, i) => (
            <figure key={(it.src || it.label) + i}>
              {it.src
                ? <PH src={it.src} alt={it.alt} r={24} />
                : <PH label={it.label} tone={it.tone} h={it.h} r={24} />}
              <span className="cat">{it.cat}</span>
            </figure>
          ))}
        </div>
      </section>

      <BCta
        title="Start your project."
        body="Tell us about your celebration, we'll be in touch within two business days."
        cta="Start Your Project"
      />
      <BFooter />
    </div>
  );
}

function BJournalIndex() {
  const j = SSX.journal;
  return (
    <div className="db bx" data-screen-label="Journal">
      <BTopbar />
      <BNav active="Journal" />
      <BXHero eyebrow="Journal" h1={j.h1} intro={j.intro} tight={true} />

      <section className="db-sec" style={{ paddingTop: 20 }}>
        <a className="bx-featured" href="#">
          <PH label={j.featured.ph.label} tone={j.featured.ph.tone} h={420} />
          <div className="body">
            <p className="meta">{j.featured.meta} · Featured</p>
            <h3>{j.featured.t}</h3>
            <p>{j.featured.excerpt}</p>
            <span className="textlink">Read the Post</span>
          </div>
        </a>
      </section>

      <section className="db-sec" style={{ paddingTop: 0 }}>
        <div className="db-journal-grid" style={{ marginTop: 0 }}>
          {j.posts.map((post, i) => (
            <a className="post" href="#" key={i}>
              <PH label={post.ph} tone={post.tone} h={240} />
              <div className="body">
                <p className="meta">{post.meta}</p>
                <h4>{post.t}</h4>
                <span className="textlink" style={{ fontSize: 12 }}>Read</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      <section className="db-sec" style={{ paddingTop: 20 }}>
        <div className="bx-news">
          <div>
            <h3>Planning notes, monthly.</h3>
            <p>One thoughtful email a month, checklists, venue finds, and what we're designing now. No noise.</p>
          </div>
          <div className="row">
            <input type="email" placeholder="Your email address" />
            <a className="btn" href="#">Subscribe</a>
          </div>
        </div>
      </section>

      <BFooter />
    </div>
  );
}

function BJournalPost() {
  const p = SSX.post;
  const related = SSX.journal.posts.slice(0, 3);
  return (
    <div className="db bx" data-screen-label="Journal Post">
      <BTopbar />
      <BNav active="Journal" />

      <section className="bx-pagehero tight">
        <div className="wash"></div>
        <p className="crumbs">Journal, <b>Planning</b></p>
        <h1 className="display" style={{ fontSize: 56, maxWidth: 820 }}>{p.h1}</h1>
        <p className="lede" style={{ maxWidth: 680 }}>{p.intro}</p>
        <p className="crumbs" style={{ marginTop: 30, marginBottom: 0 }}>{p.meta}</p>
        <div style={{ maxWidth: 880, margin: '52px auto 0', position: 'relative' }}>
          <PH label="hero, planning flatlay, timeline & swatches" tone="blush" arch={true} h={420} />
        </div>
      </section>

      <section className="db-sec" style={{ paddingTop: 40 }}>
        <div className="bx-prose">
          {p.sections.map((s, i) => (
            <React.Fragment key={i}>
              <h2>{s.h}</h2>
              <p>{s.b}</p>
            </React.Fragment>
          ))}
          <div className="bx-author">
            <PH label="samia, portrait" tone="blush" circle={true} w={72} h={72} />
            <div>
              <b>Samia Tayar</b>
              <span>Founder &amp; Creative Director, Sam Set Events</span>
            </div>
          </div>
        </div>
      </section>

      <section className="db-sec" style={{ paddingTop: 20 }}>
        <div className="db-sechead center" style={{ marginBottom: 0 }}>
          <p className="eyebrow">Keep Reading</p>
          <h2 className="display" style={{ fontSize: 38 }}>More from the journal.</h2>
        </div>
        <div className="db-journal-grid">
          {related.map((post, i) => (
            <a className="post" href="#" key={i}>
              <PH label={post.ph} tone={post.tone} h={220} />
              <div className="body">
                <p className="meta">{post.meta}</p>
                <h4>{post.t}</h4>
                <span className="textlink" style={{ fontSize: 12 }}>Read</span>
              </div>
            </a>
          ))}
        </div>
      </section>

      <BCta
        title="Planning something of your own?"
        body="Tell us about your celebration, we'll be in touch within two business days."
        cta="Book a Consultation"
      />
      <BFooter />
    </div>
  );
}

Object.assign(window, { BPortfolio, BJournalIndex, BJournalPost });