// dir-b-weddings.jsx, Direction B “Modern Romance” · Weddings service page
function BWeddings() {
  const { wedIncluded, wedFaqs, wedGallery } = SS_COPY;
  return (
    <div className="db" data-screen-label="B · Weddings">
      <BNav active="Services" />

      <section className="db-whero">
        <div className="wash"></div>
        <p className="crumbs">Home, Services, <b>Weddings</b></p>
        <h1 className="display">Weddings</h1>
        <p className="tagline">Where every detail tells your love story.</p>
        <div className="heroimg" style={{ maxWidth: 880 }}>
          <PH src="https://images.pexels.com/photos/2788494/pexels-photo-2788494.jpeg?auto=compress&cs=tinysrgb&fit=crop&w=1600" alt="Floral wedding ceremony arch in daylight, styled by Sam Set Events in New York" tone="blush" arch={true} h={460} />
        </div>
      </section>

      <section className="db-sec db-wintro">
        <p className="eyebrow">The Service</p>
        <p className="lede">Sam Set Events offers luxury wedding planning and design across New York and the surrounding tri-state area. From intimate garden ceremonies to grand ballroom celebrations, we craft weddings that are elegant, deeply personal, and seamlessly executed, so you can savor every moment of your day.</p>
      </section>

      <section className="db-sec" style={{ paddingTop: 0 }}>
        <div className="db-sechead center">
          <p className="eyebrow">What’s Included</p>
          <h2 className="display">Everything, considered.</h2>
        </div>
        <div className="db-incl-grid">
          {wedIncluded.map((item, i) => (
            <div className="item" key={i}><span className="dot"></span>{item}</div>
          ))}
        </div>      </section>

      <section className="db-sec db-approach" style={{ paddingTop: 40 }}>
        <div>
          <PH src="assets/portfolio/weddings/wedding-19.webp" alt="Wedding tablescape and styling designed by Sam Set Events" tone="sage" arch={true} h={520} />
        </div>
        <div>
          <p className="eyebrow">Our Approach</p>
          <h2 className="display" style={{ fontSize: 44, lineHeight: 1.16 }}>We start with you.</h2>
          <p className="lede">Your story, your taste, the feeling you want your guests to walk away with. From there we shape a cohesive design and handle every logistic, keeping you informed without overwhelming you.</p>
          <p className="lede" style={{ marginTop: 20 }}>On the day, our team runs everything behind the scenes so you’re free to be fully present.</p>
        </div>
      </section>

      <section className="db-sec" style={{ paddingTop: 20 }}>
        <div className="db-sechead center">
          <p className="eyebrow">Gallery</p>
          <h2 className="display">Recent weddings.</h2>
        </div>
        <div className="bx-masonry">
          {SS_GALLERY.weddings.map((g, i) => (
            <figure key={i}>
              <img src={g.src} alt={g.alt} loading="lazy" style={{ width: '100%', height: 'auto', display: 'block', borderRadius: 24 }} />
            </figure>
          ))}
        </div>
        <p style={{ textAlign: 'center', marginTop: 48 }}><a className="btn ghost" href="#">View Full Portfolio</a></p>
      </section>

      <section className="db-sec" style={{ paddingTop: 40, paddingBottom: 110 }}>
        <div className="db-wtesti">
          <span className="mark">“</span>
          <blockquote>Our wedding was everything we imagined, and somehow more. Every detail was considered.</blockquote>
          <cite>Jessica · Wedding · New York</cite>
        </div>
      </section>

      <section className="db-sec" style={{ paddingTop: 0 }}>
        <div className="db-sechead center" style={{ marginBottom: 36 }}>
          <p className="eyebrow">Wedding FAQs</p>
          <h2 className="display">Good questions, honest answers.</h2>
        </div>
        <div className="db-faq">
          {wedFaqs.map((f, i) => (
            f.open ? (
              <div className="db-faq-item open" key={i}>
                <div className="qrow">
                  <h5>{f.q}</h5>
                  <span className="chev">⌃</span>
                </div>
                <p>{f.a}</p>
              </div>
            ) : (
              <div className="db-faq-item" key={i}>
                <div className="qrow">
                  <h5>{f.q}</h5>
                  <span className="chev">⌄</span>
                </div>
              </div>
            )
          ))}
        </div>
      </section>

      <BCta
        title="Plan your wedding with us."
        body="Tell us about your day, venue, season, guest count, or just the feeling you’re after. We’ll take it from there."
        cta="Plan Your Wedding"
      />
      <BFooter />
    </div>
  );
}

Object.assign(window, { BWeddings });