// site-support.jsx, B+ Contact · FAQ · Privacy · Terms · 404
function BContact() {
  const c = SSX.contact;
  return (
    <div className="db bx" data-screen-label="Contact">
      <BTopbar />
      <BNav active="Contact" />
      <BXHero eyebrow="Get in Touch" h1={c.h1} intro={c.intro} tight={true} />

      <section className="db-sec bx-contact" style={{ paddingTop: 30 }}>
        <div className="bx-form">
          <div className="grid">
            <div className="field full">
              <label>Event Type</label>
              <select defaultValue="">
                <option value="" disabled>Select an event type</option>
                <option>Wedding</option>
                <option>Engagement Party</option>
                <option>Corporate Event</option>
                <option>Baby Shower</option>
                <option>Reception</option>
                <option>Birthday Celebration</option>
                <option>Other</option>
              </select>
            </div>
            <div className="field"><label>First Name</label><input type="text" placeholder="Jane" /></div>
            <div className="field"><label>Last Name</label><input type="text" placeholder="Smith" /></div>
            <div className="field"><label>Email</label><input type="email" placeholder="jane@example.com" /></div>
            <div className="field"><label>Phone</label><input type="tel" placeholder="(212) 000-0000" /></div>
            <div className="field"><label>Event Date <i>· optional</i></label><input type="text" placeholder="Sep 2027 (or “flexible”)" /></div>
            <div className="field"><label>Estimated Guests <i>· optional</i></label><input type="text" placeholder="e.g. 120" /></div>
            <div className="field"><label>Budget Range <i>· optional</i></label><input type="text" placeholder="Your estimated budget" /></div>
            <div className="field"><label>Venue, if known <i>· optional</i></label><input type="text" placeholder="Venue name or “still looking”" /></div>
            <div className="field full">
              <label>Tell Us About Your Celebration</label>
              <textarea placeholder="The occasion, the feeling you’re after, anything you already know you want..."></textarea>
            </div>
            <div className="field full check">
              <span className="box"></span>
              <span>Send me occasional planning notes &amp; inspiration (monthly, no noise)</span>
            </div>
          </div>
          <p style={{ margin: '26px 0 0' }}><a className="btn" href="#">Send Inquiry</a></p>
          <p className="note">We reply to every inquiry within two business days.</p>
        </div>

        <div className="bx-details">
          <div className="card">
            <h5>Studio</h5>
            <ul>
              <li>hello@samsetevents.com</li>            </ul>
          </div>
          <div className="card">
            <h5>Follow Along</h5>
            <ul>
              <li>Instagram, @samsetevents</li>
              <li>Facebook, Sam Set Events</li>
            </ul>
          </div>
          <PH label="map, service area, manhattan & tri-state" tone="sage" h={260} r={32} />
        </div>
      </section>

      <BFooter />
    </div>
  );
}

function BFaqPage() {
  const f = SSX.faq;
  return (
    <div className="db bx" data-screen-label="FAQ">
      <BTopbar />
      <BNav active={null} />
      <BXHero eyebrow="FAQ" h1={f.h1} intro={f.intro} tight={true} />

      <section className="db-sec" style={{ paddingTop: 0 }}>
        <div className="db-faq">
          {f.groups.map((g, gi) => (
            <React.Fragment key={gi}>
              <p className="bx-faqgroup">{g.g}</p>
              {g.items.map((item, i) => (
                item.open ? (
                  <div className="db-faq-item open" key={i}>
                    <div className="qrow">
                      <h5>{item.q}</h5>
                      <span className="chev">⌃</span>
                    </div>
                    <p>{item.a}</p>
                  </div>
                ) : (
                  <div className="db-faq-item" key={i}>
                    <div className="qrow">
                      <h5>{item.q}</h5>
                      <span className="chev">⌄</span>
                    </div>
                  </div>
                )
              ))}
            </React.Fragment>
          ))}
        </div>
      </section>

      <BCta
        title="Still have a question?"
        body="Ask away, we’ll reply within two business days, no pressure attached."
        cta="Get in Touch"
      />
      <BFooter />
    </div>
  );
}

function BLegalPage({ label, title, sections }) {
  return (
    <div className="db bx" data-screen-label={label}>
      <BTopbar />
      <BNav active={null} />
      <BXHero eyebrow="Legal" h1={title} tight={true} />
      <section className="db-sec" style={{ paddingTop: 10, paddingBottom: 110 }}>
        <div className="bx-prose">
          <p>Last updated: June 2026 · Sam Set Events · samsetevents.com</p>
          {sections.map((s, i) => (
            <React.Fragment key={i}>
              <h2>{s.h}</h2>
              <p>{s.b}</p>
            </React.Fragment>
          ))}
          <h2>Contact</h2>
          <p>Questions about this policy? Email hello@samsetevents.com.</p>
        </div>
      </section>
      <BFooter />
    </div>
  );
}

function BPrivacy() { return <BLegalPage label="Privacy" title="Privacy Policy" sections={SSX.privacySections} />; }
function BTerms() { return <BLegalPage label="Terms" title="Terms & Conditions" sections={SSX.termsSections} />; }

function B404() {
  return (
    <div className="db bx" data-screen-label="404">
      <BTopbar />
      <BNav active={null} />
      <section className="bx-404">
        <div className="wash" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(640px 420px at 50% 0%, color-mix(in oklab, var(--blush) calc(var(--wash-pct) * 0.9%), transparent), transparent 72%)' }}></div>
        <img src="assets/monogram-burgundy.png" alt="" style={{ position: 'relative' }} />
        <h1 className="display" style={{ position: 'relative' }}>This page slipped away.</h1>
        <p className="lede" style={{ position: 'relative' }}>Like the last dance of the evening, it was lovely, and now it’s gone. Let’s get you back to the celebration.</p>
        <div style={{ display: 'flex', gap: 18, justifyContent: 'center', position: 'relative' }}>
          <a className="btn" href="#">Back to Home</a>
          <a className="btn ghost" href="#">View Our Work</a>
        </div>
      </section>
      <BFooter />
    </div>
  );
}

Object.assign(window, { BContact, BFaqPage, BLegalPage, BPrivacy, BTerms, B404 });