// Variant B — "Editorial Sage"
// Premium magazine-style. Warm cream, deep sage green, brass gold.
// Big imagery, confident typography, more breathing room.

// Brand-significant slots flow through CSS vars (see shared.jsx::brandVars).
const B_DEFAULTS = { primary: '#2A4A3A', primaryDark: '#1F362B', accent: '#B08D3C', accentDeep: '#8A6B23' };
const B = {
  bg: '#F5F1E8',          // warm cream
  bgDeep: '#EBE4D2',
  ink: '#1A2E26',         // near-black green
  ink2: '#3D4F47',
  muted: '#7A847E',
  green:     'var(--p7-primary)',       // deep sage (brand primary)
  greenDark: 'var(--p7-primary-dark)',
  greenSoft: '#D4DDD3',
  brass:     'var(--p7-accent)',
  brassDeep: 'var(--p7-accent-deep)',
  card: '#FBF8F0',
  line: '#D9D0BC',
};

const bDisplay = '"Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif';
const bSans = '"Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif';

function BBadge({ children }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: bSans,
      fontSize: 11.5, fontWeight: 700, letterSpacing: 1.6, textTransform: 'uppercase',
      color: B.brassDeep,
    }}>
      <span style={{ width: 28, height: 1, background: B.brass }}/>
      {children}
    </span>
  );
}

function BPrimaryBtn({ children, dark, large, style, onClick, type, 'aria-label': ariaLabel }) {
  const bg = dark ? B.green : '#fff';
  const fg = dark ? '#fff' : B.green;
  const handleClick = onClick || (() => scrollToBookingForm());
  const hoverStyle = dark
    ? { transform: 'translateY(-2px)', background: B.greenDark, borderColor: B.greenDark, boxShadow: '0 16px 30px -18px rgba(26,46,38,0.55)' }
    : { transform: 'translateY(-2px)', background: 'color-mix(in srgb, var(--p7-primary) 8%, #fff)', borderColor: B.green, boxShadow: '0 14px 26px -20px rgba(26,46,38,0.35)' };
  return (
    <button
      onClick={handleClick}
      type={type || 'button'}
      aria-label={ariaLabel}
      {...rollover(hoverStyle, { transform: 'translateY(0)', background: bg, borderColor: B.green, boxShadow: 'none' })}
      style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      background: bg, color: fg, border: `1px solid ${dark ? B.green : B.green}`,
      borderRadius: 999, padding: large ? '17px 30px' : '14px 22px',
      fontSize: large ? 16 : 14, fontWeight: 700, fontFamily: bSans,
      cursor: 'pointer', letterSpacing: 0.2, transition: ROLLOVER_TRANSITION,
      ...style,
    }}>
      {children}
      <Icon name="arrow-up-right" size={large ? 18 : 16} sw={1.5} />
    </button>
  );
}

function BTopBar() {
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 50, background: B.bg,
      borderBottom: `1px solid ${B.line}`,
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto', padding: '20px 56px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <img src={SEVEN.logo} alt={SEVEN.brand} style={{ width: 196, height: 48, objectFit: 'contain', display: 'block' }} />
          <span style={{ fontFamily: bSans, fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: B.muted }}>
            Cleaning · est. 2019
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 36, fontFamily: bSans, fontSize: 13.5, color: B.ink2, fontWeight: 600 }}>
          <a onClick={() => scrollToSection('services')} style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Services</a>
          <a onClick={() => scrollToSection('process')} style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>The process</a>
          <a onClick={() => scrollToSection('stories')} style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Stories</a>
          <a onClick={() => scrollToSection('faq')} style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>FAQ</a>
          <a href={SEVEN.phoneHref} style={{ color: 'inherit', textDecoration: 'none', cursor: 'pointer' }}>Contact</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <a href={SEVEN.phoneHref} style={{
            fontFamily: bSans, fontSize: 13.5, fontWeight: 700, color: B.ink, textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            <Icon name="phone" size={14} sw={1.8} stroke={B.brass} />
            {SEVEN.phone}
          </a>
          <BPrimaryBtn dark style={{ padding: '10px 18px', fontSize: 13 }}>Book a visit</BPrimaryBtn>
        </div>
      </div>
    </div>
  );
}

function BHero() {
  return (
    <section style={{ background: B.bg, position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto', padding: '60px 56px 80px', display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64 }}>
        {/* Left — editorial text */}
        <div style={{ paddingTop: 32 }}>
          <BBadge>For Vancouver · Portland · Beyond</BBadge>
          <h1 style={{
            fontFamily: bDisplay, fontSize: 96, lineHeight: 0.95, fontWeight: 800,
            letterSpacing: -2.5, color: B.ink, margin: '24px 0 0',
          }}>
            Your home,<br />
            <em style={{ color: B.green, fontStyle: 'normal' }}>spotless</em> —<br />
            quietly done.
          </h1>
          <p style={{
            fontFamily: bSans, fontSize: 18, lineHeight: 1.6, color: B.ink2,
            maxWidth: 460, margin: '36px 0 36px',
          }}>
            A team of meticulous, vetted cleaners who treat your home like their own. Eco-friendly products, flat-rate pricing, and the kind of attention to detail you actually notice.
          </p>

          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 56 }}>
            <BPrimaryBtn dark large>Reserve a cleaning</BPrimaryBtn>
            <BPrimaryBtn large onClick={() => scrollToSection('services')}>See pricing</BPrimaryBtn>
          </div>

          {/* Editorial inline stats — like a magazine pull quote bar */}
          <div style={{
            borderTop: `1px solid ${B.line}`, borderBottom: `1px solid ${B.line}`,
            padding: '20px 0', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
          }}>
            {[
              { v: '4.9', l: '312 verified reviews', s: 'stars' },
              { v: '2,400+', l: 'Homes cleaned since 2019' },
              { v: '24 hr', l: 'Re-clean guarantee' },
            ].map((s, i) => (
              <div key={i}>
                <div style={{ fontFamily: bDisplay, fontSize: 38, fontWeight: 800, color: B.ink, letterSpacing: -0.8, lineHeight: 1, display: 'flex', alignItems: 'center', gap: 8 }}>
                  {s.v}
                  {s.s === 'stars' && <Stars n={5} size={14} color={B.brass}/>}
                </div>
                <div style={{ fontFamily: bSans, fontSize: 12, color: B.muted, marginTop: 8, letterSpacing: 0.3 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right — booking form card (interactive) */}
        <BBookingPanel />
      </div>
    </section>
  );
}

// Editorial-but-clean booking form for variant B's hero.
// The interactive implementation lives in variant-b-form.jsx (BBookingPanel + state context).
// This file just composes the page; CTAs scroll to #booking-form via scrollToBookingForm().

function BSelling() {
  return (
    <section style={{ background: B.green, color: '#fff', padding: '96px 56px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 60, marginBottom: 56, alignItems: 'flex-end' }}>
          <div>
            <BBadge>
              <span style={{ color: B.brass }}>Why Seven</span>
            </BBadge>
            <h2 style={{ fontFamily: bDisplay, fontSize: 64, lineHeight: 1, letterSpacing: -1.8, margin: '20px 0 0', fontWeight: 800 }}>
              Four reasons<br/>we're called <em>first</em>.
            </h2>
          </div>
          <p style={{ fontFamily: bSans, fontSize: 17, lineHeight: 1.6, color: B.greenSoft, maxWidth: 480, marginLeft: 'auto' }}>
            The little things compound. Here's what separates a good cleaning from one you'd happily recommend to a neighbor.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'rgba(255,255,255,0.12)', borderRadius: 4, overflow: 'hidden' }}>
          {SEVEN.selling.map((s, i) => (
            <div key={i} style={{ background: B.green, padding: '32px 28px' }}>
              <div style={{ fontFamily: bDisplay, fontSize: 56, fontWeight: 800, color: B.brass, letterSpacing: -1, marginBottom: 20, lineHeight: 1 }}>
                0{i + 1}
              </div>
              <Icon name={s.icon} size={28} sw={1.5} stroke="#fff" />
              <div style={{ fontFamily: bDisplay, fontSize: 26, fontWeight: 700, marginTop: 18, marginBottom: 12, letterSpacing: -0.5, lineHeight: 1.15 }}>
                {s.title}
              </div>
              <div style={{ fontFamily: bSans, fontSize: 14, color: B.greenSoft, lineHeight: 1.6 }}>
                {s.body}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BServices() {
  return (
    <section id="services" style={{ background: B.bg, padding: '120px 56px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <BBadge>Services</BBadge>
          <h2 style={{ fontFamily: bDisplay, fontSize: 72, fontWeight: 800, letterSpacing: -2, margin: '20px 0 16px', color: B.ink, lineHeight: 0.95 }}>
            Choose your <em style={{ color: B.green }}>clean</em>.
          </h2>
          <p style={{ fontFamily: bSans, fontSize: 17, color: B.muted, maxWidth: 540, margin: '0 auto' }}>
            Every visit is custom. Tell us what you need; we'll bring the right team and supplies.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {SEVEN.services.map((sv, i) => (
            <div key={sv.key} style={{
              background: B.card, borderRadius: 4, overflow: 'hidden',
              border: `1px solid ${B.line}`, display: 'grid', gridTemplateColumns: '1fr 1.1fr',
            }}>
              <div style={{
                background: `url(${sv.img}) center/cover`, minHeight: 280, position: 'relative',
              }}>
                <div style={{
                  position: 'absolute', top: 16, left: 16, padding: '6px 12px',
                  background: B.bg, fontFamily: bSans, fontSize: 11, fontWeight: 600,
                  letterSpacing: 1, textTransform: 'uppercase', color: B.ink,
                }}>
                  0{i + 1}
                </div>
              </div>
              <div style={{ padding: '28px 28px 28px 28px', display: 'flex', flexDirection: 'column' }}>
                <div style={{ fontFamily: bDisplay, fontSize: 32, fontWeight: 800, color: B.ink, letterSpacing: -0.6, lineHeight: 1.1, marginBottom: 8 }}>
                  {sv.name}
                </div>
                <div style={{ fontFamily: bSans, fontSize: 15.5, color: B.muted, marginBottom: 18, fontStyle: 'italic', lineHeight: 1.45 }}>
                  {sv.tagline}
                </div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 auto', display: 'grid', gap: 10 }}>
                  {sv.bullets.map((b, j) => (
                    <li key={j} style={{ fontFamily: bSans, fontSize: 15, color: B.ink2, lineHeight: 1.5, display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                      <span style={{ color: B.brass, fontFamily: bDisplay, lineHeight: 1.2 }}>—</span>
                      {b}
                    </li>
                  ))}
                </ul>
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  marginTop: 24, paddingTop: 18, borderTop: `1px solid ${B.line}`,
                }}>
                  <div>
                    <div style={{ fontFamily: bSans, fontSize: 12, letterSpacing: 1, textTransform: 'uppercase', color: B.muted }}>Starting at</div>
                    <div style={{ fontFamily: bDisplay, fontSize: 28, fontWeight: 800, color: B.ink, letterSpacing: -0.5 }}>${sv.from}</div>
                  </div>
                  <BPrimaryBtn dark style={{ padding: '12px 20px', fontSize: 13 }}>Reserve</BPrimaryBtn>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BProcess() {
  return (
    <section id="process" style={{ background: B.bgDeep, padding: '120px 56px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'flex-start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <BBadge>The process</BBadge>
            <h2 style={{ fontFamily: bDisplay, fontSize: 64, fontWeight: 800, letterSpacing: -2, margin: '20px 0 24px', color: B.ink, lineHeight: 0.95 }}>
              Three steps.<br/>That's <em style={{ color: B.green }}>it</em>.
            </h2>
            <p style={{ fontFamily: bSans, fontSize: 16, lineHeight: 1.65, color: B.ink2, marginBottom: 28 }}>
              No back-and-forth quotes. No hidden fees. No tipping required. We've removed every friction except for the part where you decide what time works.
            </p>
            <BPrimaryBtn dark>Start booking</BPrimaryBtn>
          </div>

          <div style={{ display: 'grid', gap: 16 }}>
            {SEVEN.steps.map((st, i) => (
              <div key={st.n} style={{
                background: B.card, padding: 32, borderRadius: 4, border: `1px solid ${B.line}`,
                display: 'grid', gridTemplateColumns: '80px 1fr', gap: 24, alignItems: 'flex-start',
              }}>
                <div style={{ fontFamily: bDisplay, fontSize: 64, fontWeight: 800, color: B.brass, letterSpacing: -1.5, lineHeight: 0.9 }}>
                  0{st.n}
                </div>
                <div>
                  <div style={{ fontFamily: bDisplay, fontSize: 28, fontWeight: 700, color: B.ink, letterSpacing: -0.5, lineHeight: 1.15, marginBottom: 10 }}>
                    {st.title}
                  </div>
                  <div style={{ fontFamily: bSans, fontSize: 15, color: B.ink2, lineHeight: 1.65 }}>
                    {st.body}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function BReviews() {
  return (
    <section id="stories" style={{ background: B.bg, padding: '120px 56px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 24, alignItems: 'flex-end', marginBottom: 56 }}>
          <div>
            <BBadge>Stories from clients</BBadge>
            <h2 style={{ fontFamily: bDisplay, fontSize: 72, fontWeight: 800, letterSpacing: -2, margin: '20px 0 0', color: B.ink, lineHeight: 0.95 }}>
              They came back.<br/><em style={{ color: B.green }}>So did the shine.</em>
            </h2>
          </div>
          <div style={{ textAlign: 'right' }}>
            <div style={{ fontFamily: bDisplay, fontSize: 56, fontWeight: 800, color: B.ink, letterSpacing: -1.5, lineHeight: 1 }}>4.9 / 5</div>
            <div style={{ fontFamily: bSans, fontSize: 12.5, color: B.muted, marginTop: 6, letterSpacing: 0.3 }}>
              <Stars n={5} size={14} color={B.brass}/> · 312 reviews on Google
            </div>
          </div>
        </div>

        {/* Hero review */}
        <div style={{
          background: B.card, borderRadius: 4, padding: '48px 56px', marginBottom: 24,
          border: `1px solid ${B.line}`, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'center',
        }}>
          <div>
            <Icon name="sparkles" size={32} sw={1.4} stroke={B.brass}/>
            <div style={{ fontFamily: bDisplay, fontSize: 36, fontWeight: 700, lineHeight: 1.25, color: B.ink, letterSpacing: -0.6, margin: '20px 0 28px' }}>
              "I'm kicking myself for not having called them sooner. They arrived less than 48 hours after I contacted them, deep cleaned the entire house in three hours, and left me with a spotless, great-smelling home."
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <img src={SEVEN.reviews[1].avatar} style={{ width: 48, height: 48, borderRadius: '50%', objectFit: 'cover' }}/>
              <div>
                <div style={{ fontFamily: bSans, fontSize: 15, fontWeight: 600, color: B.ink }}>Katie</div>
                <div style={{ fontFamily: bSans, fontSize: 13, color: B.muted }}>Portland, OR · Deep cleaning</div>
              </div>
            </div>
          </div>
          <div style={{
            aspectRatio: '4/5',
            background: `url(https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&q=80&auto=format&fit=crop) center/cover`,
            borderRadius: 4,
          }}/>
        </div>

        {/* Smaller review row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {SEVEN.reviews.slice(2, 5).map((r, i) => (
            <div key={i} style={{
              background: B.card, padding: 28, borderRadius: 4, border: `1px solid ${B.line}`,
            }}>
              <Stars n={r.stars} size={14} color={B.brass} />
              <div style={{ fontFamily: bDisplay, fontSize: 19, fontWeight: 600, lineHeight: 1.35, color: B.ink, marginTop: 14, marginBottom: 20 }}>
                "{r.body}"
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingTop: 16, borderTop: `1px solid ${B.line}` }}>
                <img src={r.avatar} style={{ width: 36, height: 36, borderRadius: '50%', objectFit: 'cover' }}/>
                <div>
                  <div style={{ fontFamily: bSans, fontSize: 13, fontWeight: 600, color: B.ink }}>{r.name}</div>
                  <div style={{ fontFamily: bSans, fontSize: 11.5, color: B.muted }}>{r.city}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BBookingStrip() {
  return (
    <section style={{ background: B.bg, padding: '0 56px 120px' }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto',
        background: `linear-gradient(180deg, ${B.green}, ${B.greenDark})`,
        borderRadius: 4, padding: '64px 64px', color: '#fff', position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', right: -40, top: -40, width: 240, height: 240, borderRadius: '50%',
          background: B.brass, opacity: 0.15, filter: 'blur(40px)',
        }}/>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <BBadge><span style={{ color: B.brass }}>Reserve your time</span></BBadge>
            <h2 style={{ fontFamily: bDisplay, fontSize: 64, fontWeight: 800, letterSpacing: -2, lineHeight: 0.95, margin: '24px 0 24px' }}>
              Tomorrow morning,<br/><em>spotless</em>.
            </h2>
            <p style={{ fontFamily: bSans, fontSize: 16, color: B.greenSoft, lineHeight: 1.6, marginBottom: 28, maxWidth: 460 }}>
              We respond to every quote within an hour during business hours. Most cleanings are booked within 48 hours.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <button type="button" onClick={scrollToBookingForm} style={{
                padding: '18px 28px', background: B.brass, color: B.ink, border: 'none',
                borderRadius: 999, fontFamily: bSans, fontWeight: 700, fontSize: 15,
                display: 'inline-flex', alignItems: 'center', gap: 10, cursor: 'pointer',
                transition: ROLLOVER_TRANSITION,
              }}
              {...rollover(
                { transform: 'translateY(-2px)', background: B.accentDeep, boxShadow: '0 16px 30px -18px rgba(0,0,0,0.35)' },
                { transform: 'translateY(0)', background: B.brass, boxShadow: 'none' }
              )}>
                Get my quote <Icon name="arrow-right" size={16} sw={2.2}/>
              </button>
              <a href={SEVEN.phoneHref} style={{
                color: '#fff', textDecoration: 'none', fontFamily: bSans, fontSize: 15, fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                <Icon name="phone" size={16} sw={2} stroke={B.brass}/> {SEVEN.phone}
              </a>
            </div>
          </div>

          <div style={{ background: 'rgba(255,255,255,0.06)', backdropFilter: 'blur(4px)', borderRadius: 4, padding: 32, border: '1px solid rgba(255,255,255,0.12)' }}>
            <div style={{ fontFamily: bSans, fontSize: 11, color: B.brass, fontWeight: 800, letterSpacing: 1.6, textTransform: 'uppercase', marginBottom: 18 }}>
              What happens next
            </div>
            <div style={{ display: 'grid', gap: 18 }}>
              {[
                { icon: 'clock', title: 'Fast response', body: 'We confirm availability and pricing within an hour during business hours.' },
                { icon: 'shield', title: 'Insured cleaners', body: 'Licensed, bonded, and background-checked teams for every visit.' },
                { icon: 'sparkles', title: '24-hour guarantee', body: 'If something is missed, tell us within a day and we will make it right.' },
              ].map((item) => (
                <div key={item.title} style={{ display: 'grid', gridTemplateColumns: '44px 1fr', gap: 16, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 44, height: 44, borderRadius: 999,
                    background: 'rgba(255,255,255,0.12)', color: B.brass,
                    display: 'grid', placeItems: 'center', flexShrink: 0,
                  }}>
                    <Icon name={item.icon} size={20} sw={1.8} />
                  </div>
                  <div>
                    <div style={{ fontFamily: bDisplay, fontSize: 22, fontWeight: 800, color: '#fff', letterSpacing: -0.4, lineHeight: 1.1, marginBottom: 5 }}>
                      {item.title}
                    </div>
                    <div style={{ fontFamily: bSans, fontSize: 14.5, lineHeight: 1.55, color: B.greenSoft }}>
                      {item.body}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BFaq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ background: B.bgDeep, padding: '120px 56px' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 80, alignItems: 'flex-start' }}>
        <div style={{ position: 'sticky', top: 100 }}>
          <BBadge>FAQ</BBadge>
          <h2 style={{ fontFamily: bDisplay, fontSize: 56, fontWeight: 800, letterSpacing: -1.5, margin: '20px 0 20px', color: B.ink, lineHeight: 0.95 }}>
            Questions,<br/><em style={{ color: B.green }}>answered.</em>
          </h2>
          <p style={{ fontFamily: bSans, fontSize: 14.5, color: B.ink2, lineHeight: 1.65 }}>
            Still unsure? Text us at {SEVEN.phone} — we usually reply within minutes.
          </p>
        </div>
        <div>
          {SEVEN.faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: `1px solid ${B.line}` }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', padding: '24px 0', background: 'none', border: 'none', cursor: 'pointer',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, textAlign: 'left',
                }}>
                  <span style={{ fontFamily: bDisplay, fontSize: 26, fontWeight: 700, color: B.ink, letterSpacing: -0.5, lineHeight: 1.2 }}>
                    {f.q}
                  </span>
                  <span style={{
                    width: 36, height: 36, borderRadius: '50%', border: `1px solid ${B.green}`,
                    color: B.green, display: 'grid', placeItems: 'center', flexShrink: 0,
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)', transition: 'transform .25s',
                  }}>
                    <Icon name="plus" size={14} sw={2}/>
                  </span>
                </button>
                {isOpen && (
                  <div style={{ paddingBottom: 24, fontFamily: bSans, fontSize: 15, color: B.ink2, lineHeight: 1.7, maxWidth: 560 }}>
                    {f.a}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function BFooter() {
  return (
    <footer style={{ background: B.ink, color: B.greenSoft, padding: '34px 56px 26px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40,
          paddingBottom: 24, borderBottom: '1px solid rgba(255,255,255,0.1)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
            <img src={SEVEN.logo} alt={SEVEN.brand} style={{ width: 220, height: 54, objectFit: 'contain', display: 'block' }} />
            <div style={{ fontFamily: bSans, fontSize: 14, lineHeight: 1.6, maxWidth: 420, color: 'rgba(255,255,255,0.62)' }}>
              Meticulous, eco-friendly cleaning for Vancouver, Portland, and nearby communities.
            </div>
          </div>
          <nav style={{ display: 'flex', alignItems: 'center', gap: 24, fontFamily: bSans, fontSize: 13.5, fontWeight: 600 }}>
            <a onClick={() => scrollToSection('services')} style={{ color: 'rgba(255,255,255,0.76)', textDecoration: 'none' }}>Services</a>
            <a onClick={() => scrollToSection('stories')} style={{ color: 'rgba(255,255,255,0.76)', textDecoration: 'none' }}>Reviews</a>
            <a onClick={() => scrollToSection('faq')} style={{ color: 'rgba(255,255,255,0.76)', textDecoration: 'none' }}>FAQ</a>
            <a href={SEVEN.phoneHref} style={{ color: '#fff', textDecoration: 'none' }}>{SEVEN.phone}</a>
          </nav>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 24, alignItems: 'center', paddingTop: 18, fontFamily: bSans, fontSize: 12, color: 'rgba(255,255,255,0.48)' }}>
          <div>© 2026 7 Seven Cleaning. All rights reserved.</div>
          <a href="mailto:vitaliy.georgiev@gmail.com" style={{ color: 'rgba(255,255,255,0.54)', textDecoration: 'none', textAlign: 'center' }}>
            design & marketing by Vit
          </a>
          <div style={{ textAlign: 'right' }}>11115 NE 61st Ct · Vancouver, WA 98686</div>
        </div>
      </div>
    </footer>
  );
}

function VariantB() {
  const brand = useBrand();
  const vars = brandVars(brand, B_DEFAULTS);
  return (
    <BFormProvider>
      <div data-screen-label="B · Editorial Sage" style={{
        ...vars,
        background: B.bg, fontFamily: bSans, color: B.ink, width: '100%', overflow: 'hidden',
      }}>
        <BTopBar />
        <BHero />
        <BServices />
        <BSelling />
        <BProcess />
        <BReviews />
        <BBookingStrip />
        <BFaq />
        <BFooter />
        <BSubmitModal />
      </div>
    </BFormProvider>
  );
}

Object.assign(window, {
  VariantB, B, B_DEFAULTS, bSans, bDisplay,
  BBadge, BPrimaryBtn,
  BTopBar, BHero, BSelling, BServices, BProcess, BReviews, BBookingStrip, BFaq, BFooter,
});