// dir-b-home.jsx, Direction B “Modern Romance” · Home page + shared B chrome
function BNav({ active }) {
  return (
    <header className="db-nav">
      <a className="db-brand" href="#">
        <img src="assets/monogram-burgundy.png" alt="SS monogram" />
        <span className="bt"><b>SAM SET</b><i>EVENTS</i></span>
      </a>
      <nav>
        {SS_COPY.navLinks.map((l) => (
          <a key={l} href="#" className={l === active ? 'active' : ''}>{l}</a>
        ))}
      </nav>
      <a className="btn" href="#">Start Planning</a>
    </header>
  );
}

function BFooter() {
  return (
    <footer className="db-footer">
      <div className="cols">
        <div>
          <img src="assets/logo-ivory.png" alt="Sam Set Events" />
          <p className="tag">Luxury wedding &amp; event planning in New York, warm, intentional, and beautifully composed.</p>
        </div>
        <div>
          <h6>Explore</h6>
          <ul>{SS_COPY.footerExplore.map((l) => <li key={l}><a href="#">{l}</a></li>)}</ul>
        </div>
        <div>
          <h6>Services</h6>
          <ul>{SS_COPY.services.map((s) => <li key={s.n}><a href="#">{s.name}</a></li>)}</ul>
        </div>
        <div>
          <h6>Contact</h6>
          <ul>
            <li>hello@samsetevents.com</li>            <li>Instagram · Facebook</li>
          </ul>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 Sam Set Events, samsetevents.com</span>
        <span className="links"><a href="#">Privacy Policy</a><a href="#">Terms &amp; Conditions</a></span>
      </div>
    </footer>
  );
}

function BCta({ title, body, cta }) {
  return (
    <div className="db-cta-wrap">
      <section className="db-cta">
        <div className="glow"></div>
        <img src="assets/monogram-ivory.png" alt="" />
        <h2 className="display">{title}</h2>
        <p>{body}</p>
        <a className="btn" href="#">{cta}</a>
      </section>
    </div>
  );
}

function BHome() {
  const { services, process, testimonials, why, journal, faqsHome, venues } = SS_COPY;
  const cardWash = ['w-blush', 'w-line', 'w-sage', 'w-line', 'w-blush', 'w-line'];
  return (
    <div className="db" data-screen-label="B · Home">
      <BNav active={null} />

      <section className="db-hero">
        <div className="wash"></div>
        <p className="eyebrow">Luxury Wedding &amp; Event Planning, New York</p>
        <h1 className="display">Celebrations, beautifully composed.</h1>
        <p className="lede">Sam Set Events designs weddings and celebrations across New York with quiet luxury, precise detail, and a calm, hands-on team, so every moment feels effortless, and entirely yours.</p>
        <div className="ctas">
          <a className="btn" href="#">Start Planning</a>
          <a className="btn ghost" href="#">View Our Work</a>
        </div>
        <div className="db-hero-arches">
          <PH label="ceremony arch, garden florals" tone="sage" arch={true} w={300} h={380} />
          <PH label="hero, couple beneath floral arch, soft light" tone="blush" arch={true} w={460} h={560} />
          <PH label="tablescape, blush linen, candlelight" tone="gold" arch={true} w={300} h={420} />
          <span className="dot" style={{ width: 18, height: 18, background: 'var(--gold)', left: '7%', bottom: 150, opacity: 0.65 }}></span>
          <span className="dot" style={{ width: 12, height: 12, background: 'var(--sage)', right: '13%', bottom: 320, opacity: 0.7 }}></span>
        </div>
      </section>

      <section className="db-trust">
        <p>Trusted by couples, families &amp; companies across New York</p>
        <div className="logos">{venues.map((v, i) => <span key={i}>{v}</span>)}</div>
      </section>

      <section className="db-story">
        <div className="db-story-img">
          <span className="accent"></span>
          <PH label="founder arranging florals, candid" tone="rose" arch={true} h={480} style={{ position: 'relative', zIndex: 1 }} />
        </div>
        <div>
          <p className="eyebrow">Our Story</p>
          <h2 className="display">Every celebration, composed like a story.</h2>
          <p className="lede">From the first conversation to the final farewell, we shape events that feel personal, considered, and beautifully calm. We obsess over the details, the light, the linen, the timing, so you can be fully present for the moments that matter most.</p>
          <a className="btn ghost" href="#" style={{ marginTop: 36 }}>About Sam Set Events</a>
        </div>
      </section>

      <section className="db-sec">
        <div className="db-sechead center">
          <p className="eyebrow">What We Do</p>
          <h2 className="display">Thoughtfully planned. Beautifully realized.</h2>
        </div>
        <div className="db-svc-grid">
          {services.map((s, i) => (
            <a className={'db-svc-card ' + cardWash[i]} href="#" key={s.n}>              <h4>{s.name}</h4>
              <p>{s.blurb}</p>
              <span className="go">Explore →</span>
            </a>
          ))}
        </div>
      </section>

      <section className="db-sec" style={{ paddingTop: 20 }}>
        <div className="db-sechead center">
          <p className="eyebrow">How We Work</p>
          <h2 className="display">A calm, considered process.</h2>
        </div>
        <div className="db-proc-grid">
          {process.map((p) => (
            <div className="step" key={p.n}>
              <div className="bub">{p.n}</div>
              <h4>{p.t}</h4>
              <p>{p.b}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="db-sec db-port" style={{ paddingTop: 40 }}>
        <div className="db-sechead center">
          <p className="eyebrow">Selected Work</p>
          <h2 className="display">A glimpse of recent celebrations.</h2>
        </div>
        <div className="db-port-row">
          <PH label="reception, long tables, garden room" tone="gold" arch={true} w={360} h={420} />
          <PH label="featured wedding, first dance, drapery &amp; light" tone="blush" arch={true} w={440} h={500} />
          <PH label="baby shower, pastel florals" tone="sage" arch={true} w={360} h={380} />
        </div>
        <a className="btn ghost" href="#">View Full Portfolio</a>
      </section>

      <section className="db-founder">
        <PH label="samia tayar, portrait" tone="blush" circle={true} w={240} h={240} />
        <div>
          <p className="eyebrow">From the Founder</p>
          <blockquote>“I believe every celebration should feel like the people at its center, warm, intentional, unforgettable. My role is to carry the weight of the details, so you can simply enjoy the moment.”</blockquote>
          <cite>Samia Tayar, <span>Founder &amp; Creative Director</span></cite>
        </div>
      </section>

      <section className="db-sec db-why">
        <div>
          <p className="eyebrow">Why Sam Set</p>
          <h2 className="display">Why clients choose Sam Set Events.</h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: 420 }}>The difference between lovely and unforgettable is the part you never see.</p>
        </div>
        <ul>
          {why.map((w, i) => (
            <li key={i}><span className="dot"></span>{w}</li>
          ))}
        </ul>
      </section>

      <section className="db-sec" style={{ paddingTop: 20 }}>
        <div className="db-sechead center">
          <p className="eyebrow">Testimonials</p>
          <h2 className="display">Kind words from our clients.</h2>
        </div>
        <div className="db-testi-grid">
          {testimonials.map((t, i) => (
            <div className="db-testi-card" key={i}>
              <span className="mark">“</span>
              <blockquote>{t.q}</blockquote>
              <cite>{t.a} · {t.tag}</cite>
            </div>
          ))}
        </div>
        <div className="db-testi-dots"><span className="on"></span><span></span><span></span></div>
      </section>

<section className="db-sec" style={{ paddingTop: 20 }}>
        <div className="db-sechead center" style={{ marginBottom: 36 }}>
          <p className="eyebrow">Questions</p>
          <h2 className="display">Before you ask.</h2>
        </div>
        <div className="db-faq">
          {faqsHome.map((q, i) => (
            <div className="db-faq-item" key={i}>
              <div className="qrow">
                <h5>{q}</h5>
                <span className="chev">⌄</span>
              </div>
            </div>
          ))}
          <p style={{ textAlign: 'center', marginTop: 32 }}><a className="textlink" href="#">View all FAQs</a></p>
        </div>
      </section>

      <BCta
        title="Let’s plan something beautiful."
        body="Tell us about your celebration, we’ll be in touch within two business days."
        cta="Book a Consultation"
      />
      <BFooter />
    </div>
  );
}

Object.assign(window, { BHome, BNav, BFooter, BCta });