// variation-b.jsx — Signal / Studio
// Editorial dark: serif display, generous whitespace, restrained motion,
// photo-led gallery, featured pull-quote testimonial. Same accent.

const ACCENT_B = "#3a8dff";
const BG_B = "#0b0b0d";
const BG_B_ALT = "#101014";
const FG_B = "#ececec";
const MUTED_B = "rgba(236,236,236,.55)";

// Injected once: responsive rules + section padding via CSS vars.
const B_RESPONSIVE_CSS = `
.b-root {
  --b-pad-x: clamp(24px, 7vw, 96px);
  --b-pad-y: clamp(64px, 11vw, 140px);
}
.b-section { padding: var(--b-pad-y) var(--b-pad-x); }
.b-hero-pad { padding: clamp(56px, 8vw, 100px) var(--b-pad-x) clamp(48px, 6vw, 80px); }
.b-row { display: grid; gap: clamp(40px, 6vw, 100px); }
.b-row.about     { grid-template-columns: 1fr 1.4fr; align-items: start; }
.b-row.services  { grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 32px); }
.b-row.gallery   { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, clamp(220px, 24vw, 320px)); gap: 16px; }
.b-row.gallery > :first-child { grid-row: 1 / span 2; }
.b-row.press     { grid-template-columns: repeat(5, 1fr); }
.b-row.pricing   { grid-template-columns: repeat(3, 1fr); gap: 16px; }
.b-row.testi     { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.b-row.booking   { grid-template-columns: 1fr 1.3fr; align-items: start; gap: clamp(40px, 6vw, 100px); }
.b-row.contact   { grid-template-columns: 1.4fr 1fr; align-items: end; }
.b-row.stats     { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.b-row.hero-bottom { grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 60px); align-items: end; }
.b-row.section-head { grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
.b-row.section-head-equal { grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(32px, 5vw, 80px); }
.b-hero-h1 { font-size: clamp(56px, 12vw, 144px); }
.b-h2 { font-size: clamp(40px, 7vw, 80px); }
.b-h2-large { font-size: clamp(48px, 9vw, 96px); }
.b-about-title { font-size: clamp(36px, 5.5vw, 64px); }
.b-about-lede { font-size: clamp(18px, 2.2vw, 26px); }
.b-footer-logo { font-size: clamp(56px, 14vw, 140px); }
.b-row.about .b-about-lede { margin-top: clamp(0px, 1vw, 28px); }
.b-press-cell { font-size: clamp(18px, 2.4vw, 28px); }
.b-nav-pad { padding: 24px clamp(20px, 4vw, 48px); }
.b-pricing-price { font-size: clamp(52px, 6vw, 72px); }
.b-service-card { padding: clamp(24px, 3vw, 36px); }
.b-track-row .b-track-set, .b-track-row .b-track-bar { transition: opacity .2s; }
@media (max-width: 960px) {
  .b-row.about, .b-row.booking, .b-row.contact, .b-row.pricing, .b-row.testi { grid-template-columns: 1fr; }
  .b-row.press { grid-template-columns: repeat(3, 1fr); }
  .b-row.gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: clamp(220px, 32vw, 280px) clamp(220px, 32vw, 280px) clamp(220px, 32vw, 280px);
  }
  .b-row.gallery > :first-child { grid-row: 1 / 2; grid-column: 1 / 3; }
  .b-row.stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .b-nav-links { display: none !important; }
  .b-track-row { grid-template-columns: auto 52px 1fr 110px !important; }
  .b-track-row .b-track-bar, .b-track-row .b-track-set { display: none !important; }
}
@media (max-width: 720px) {
  .b-row.services { grid-template-columns: 1fr; }
  .b-row.press { grid-template-columns: repeat(2, 1fr); }
  .b-row.hero-bottom { grid-template-columns: 1fr; }
  .b-row.section-head, .b-row.section-head-equal { grid-template-columns: 1fr; }
  .b-row.gallery > :first-child { grid-column: 1 / 2; }
  .b-row.gallery { grid-template-columns: 1fr; }
  .b-hero-meta { display: none; }
}
@media (max-width: 480px) {
  .b-row.stats { grid-template-columns: 1fr; }
  .b-hero-cta { width: 100%; }
  .b-cta-btn { flex: 1; text-align: center; }
}
`;

function VariationB({ width = 1280 }) {
  const [lang, setLang, t] = useLang();

  React.useEffect(() => {
    if (document.getElementById("b-responsive-styles")) return;
    const s = document.createElement("style");
    s.id = "b-responsive-styles";
    s.textContent = B_RESPONSIVE_CSS;
    document.head.appendChild(s);
  }, []);

  // Smooth-scroll to a section by id, accounting for the sticky nav.
  const scrollTo = React.useCallback((id) => (e) => {
    if (e) e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    const nav = document.querySelector("nav.b-nav-pad");
    const offset = nav ? nav.getBoundingClientRect().height + 12 : 0;
    const top = el.getBoundingClientRect().top + window.scrollY - offset;
    window.scrollTo({ top, behavior: "smooth" });
  }, []);

  return (
    <div className="b-root" style={{
      width: "100%",
      minHeight: "100vh",
      background: BG_B,
      color: FG_B,
      fontFamily: "'Inter', 'Helvetica Neue', sans-serif",
      fontSize: 16,
      lineHeight: 1.55,
      overflowX: "clip",
    }}>
      {/* ─── NAV ─── */}
      <NavB t={t} lang={lang} setLang={setLang} scrollTo={scrollTo} />

      {/* ─── HERO ─── */}
      <section style={{ minHeight: "clamp(640px, 90vh, 920px)", position: "relative" }}>
        <ShapeWaveHero accent={ACCENT_B}>
          <div className="b-hero-pad" style={{ height: "100%", minHeight: "clamp(640px, 90vh, 920px)", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div className="b-hero-meta" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div data-shape-mask style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 11,
                letterSpacing: 3,
                color: MUTED_B,
                textTransform: "uppercase",
                padding: "8px 12px",
                background: "rgba(10,10,12,.6)",
                backdropFilter: "blur(8px)",
                borderRadius: 999,
                border: "1px solid rgba(255,255,255,.06)",
              }}>
                <span style={{ color: ACCENT_B }}>●</span> Valencia, ES · {t.hero.role}
              </div>
              <div data-shape-mask style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 11,
                color: MUTED_B,
                letterSpacing: 1.5,
                textAlign: "right",
                padding: "8px 12px",
                background: "rgba(10,10,12,.6)",
                backdropFilter: "blur(8px)",
                borderRadius: 6,
                border: "1px solid rgba(255,255,255,.06)",
                lineHeight: 1.4,
              }}>
                <div>Vol. 12 · No. 26</div>
                <div>Andrei Tatar Studio</div>
              </div>
            </div>

            {/* serif display title */}
            <div style={{ maxWidth: 1080 }}>
              <h1 data-shape-mask className="b-hero-h1" style={{
                fontFamily: "'Fraunces', 'Playfair Display', Georgia, serif",
                fontWeight: 400,
                lineHeight: 0.92,
                letterSpacing: -3,
                margin: 0,
                color: FG_B,
                fontStyle: "normal",
                textShadow: "0 4px 60px rgba(0,0,0,.55)",
              }}>
                {t.hero.tagline_b}
              </h1>
              <div className="b-row hero-bottom" style={{ marginTop: "clamp(28px, 5vw, 56px)" }}>
                <p data-shape-mask style={{
                  fontSize: "clamp(15px, 1.6vw, 19px)",
                  lineHeight: 1.55,
                  color: "rgba(236,236,236,.88)",
                  maxWidth: 480,
                  margin: 0,
                  padding: "12px 16px",
                  background: "rgba(10,10,12,.55)",
                  backdropFilter: "blur(8px)",
                  borderRadius: 6,
                  border: "1px solid rgba(255,255,255,.06)",
                }}>{t.hero.lede_b}</p>
                <div data-shape-mask className="b-hero-cta" style={{ display: "flex", gap: 12, flexShrink: 0 }}>
                  <button onClick={scrollTo("booking")} style={btnPrimaryB}>{t.hero.book_cta} →</button>
                  <button onClick={scrollTo("mixes")} style={btnGhostB}>▶ {t.hero.mixes_cta}</button>
                </div>
              </div>
            </div>
          </div>
        </ShapeWaveHero>

        {/* scroll cue */}
        <div style={{
          position: "absolute",
          bottom: 24,
          left: "50%",
          transform: "translateX(-50%)",
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10,
          letterSpacing: 3,
          color: MUTED_B,
          textTransform: "uppercase",
          display: "flex",
          alignItems: "center",
          gap: 12,
        }}>
          <span>{t.hero.scroll}</span>
          <span style={{
            width: 1,
            height: 24,
            background: `linear-gradient(180deg, ${ACCENT_B}, transparent)`,
          }} />
        </div>
      </section>

      {/* ─── ABOUT ─── */}
      <section id="about" className="b-section">
        <div className="b-row about">
          <div>
            <KickerB accent={ACCENT_B}>{t.about.kicker}</KickerB>
            <h2 className="b-about-title" style={{
              fontFamily: "'Fraunces', Georgia, serif",
              fontWeight: 400,
              lineHeight: 1.05,
              letterSpacing: -1.5,
              margin: "20px 0 0",
            }}>
              {t.about.title_b}
            </h2>
          </div>
          <div>
            <p className="b-about-lede" style={{
              fontFamily: "'Fraunces', Georgia, serif",
              lineHeight: 1.4,
              color: "rgba(236,236,236,.82)",
              fontWeight: 300,
              textWrap: "pretty",
              margin: 0,
            }}>
              {t.about.body}
            </p>
          </div>
        </div>

        {/* stats row */}
        <div className="b-row stats" style={{
          marginTop: "clamp(56px, 8vw, 100px)",
          paddingTop: 40,
          borderTop: "1px solid rgba(255,255,255,.1)",
        }}>
          {t.about.stats.map((s, i) => (
            <div key={i}>
              <div style={{
                fontFamily: "'Fraunces', Georgia, serif",
                fontSize: "clamp(48px, 6.5vw, 72px)",
                fontWeight: 400,
                letterSpacing: -2,
                lineHeight: 1,
                color: FG_B,
              }}>
                {s.n}
              </div>
              <div style={{
                marginTop: 12,
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 11,
                letterSpacing: 1.8,
                color: MUTED_B,
                textTransform: "uppercase",
              }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ─── SERVICES ─── */}
      <section id="services" className="b-section" style={{ background: BG_B_ALT }}>
        <div style={{ marginBottom: "clamp(48px, 7vw, 80px)", maxWidth: 720 }}>
          <KickerB accent={ACCENT_B}>{t.services.kicker}</KickerB>
          <h2 className="b-h2" style={{
            fontFamily: "'Fraunces', Georgia, serif",
            fontWeight: 400,
            lineHeight: 1,
            letterSpacing: -2,
            margin: "20px 0 0",
          }}>{t.services.title}</h2>
        </div>

        <div className="b-row services">
          {t.services.items.map((s) => (
            <ServiceCardB key={s.id} item={s} accent={ACCENT_B} />
          ))}
          {/* fill the 6th cell with a CTA card */}
          <div onClick={scrollTo("booking")} className="b-service-card" style={{
            background: ACCENT_B,
            color: "#0a0a0a",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            minHeight: 280,
            borderRadius: 8,
            cursor: "pointer",
          }}>
            <div>
              <div style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 11,
                letterSpacing: 2,
                fontWeight: 600,
                textTransform: "uppercase",
                marginBottom: 16,
              }}>↗ {t.nav.contact}</div>
              <div style={{
                fontFamily: "'Fraunces', Georgia, serif",
                fontSize: "clamp(28px, 3.5vw, 38px)",
                fontWeight: 400,
                lineHeight: 1.05,
                letterSpacing: -1,
              }}>
                {lang === "es" ? "¿No encajas en ninguna categoría?" : "Don't fit a category?"}
              </div>
            </div>
            <div style={{ fontSize: 15, lineHeight: 1.5, fontWeight: 500 }}>
              {lang === "es"
                ? "Escríbeme. Diseño cada evento desde cero."
                : "Get in touch — I scope every event from scratch."}
            </div>
          </div>
        </div>
      </section>

      {/* ─── PULL QUOTE TESTIMONIAL ─── */}
      <FeaturedQuoteB t={t} accent={ACCENT_B} />

      {/* ─── MIXES ─── */}
      <div id="mixes">
        <MixesSection t={t} accent={ACCENT_B} bg={BG_B} bgAlt={BG_B_ALT} mutedColor={MUTED_B} fg={FG_B} />
      </div>

      {/* ─── GALLERY ─── */}
      <section id="work" className="b-section">
        <div className="b-row section-head" style={{ marginBottom: "clamp(40px, 6vw, 64px)" }}>
          <div>
            <KickerB accent={ACCENT_B}>{t.gallery.kicker}</KickerB>
            <h2 className="b-h2" style={{
              fontFamily: "'Fraunces', Georgia, serif",
              fontWeight: 400,
              lineHeight: 1,
              letterSpacing: -2,
              margin: "20px 0 0",
            }}>{t.gallery.title}</h2>
          </div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 12,
            color: MUTED_B,
            letterSpacing: 1.5,
          }}>06 / 480+</div>
        </div>

        <div className="b-row gallery">
          <GalleryTileB g={t.gallery.items[0]} large accent={ACCENT_B} />
          <GalleryTileB g={t.gallery.items[1]} accent={ACCENT_B} />
          <GalleryTileB g={t.gallery.items[2]} accent={ACCENT_B} />
          <GalleryTileB g={t.gallery.items[3]} accent={ACCENT_B} />
          <GalleryTileB g={t.gallery.items[4]} accent={ACCENT_B} />
        </div>
      </section>

      {/* ─── PRESS — refined ─── */}
      <section style={{
        padding: "clamp(48px, 7vw, 80px) var(--b-pad-x)",
        background: BG_B_ALT,
      }}>
        <KickerB accent={ACCENT_B} style={{ marginBottom: 32 }}>{t.press.kicker}</KickerB>
        <div className="b-row press" style={{
          gap: 0,
          borderTop: "1px solid rgba(255,255,255,.1)",
          borderLeft: "1px solid rgba(255,255,255,.1)",
        }}>
          {t.press.items.map((p) => (
            <div key={p} className="b-press-cell" style={{
              padding: "clamp(24px, 4vw, 40px) 16px",
              borderRight: "1px solid rgba(255,255,255,.1)",
              borderBottom: "1px solid rgba(255,255,255,.1)",
              fontFamily: "'Fraunces', Georgia, serif",
              fontWeight: 400,
              letterSpacing: -0.5,
              textAlign: "center",
              color: "rgba(236,236,236,.7)",
            }}>{p}</div>
          ))}
        </div>
      </section>

      {/* ─── PRICING ─── */}
      <section id="rates" className="b-section">
        <div className="b-row section-head-equal" style={{ marginBottom: "clamp(48px, 7vw, 80px)" }}>
          <div>
            <KickerB accent={ACCENT_B}>{t.pricing.kicker}</KickerB>
            <h2 className="b-h2" style={{
              fontFamily: "'Fraunces', Georgia, serif",
              fontWeight: 400,
              lineHeight: 1,
              letterSpacing: -2,
              margin: "20px 0 0",
            }}>{t.pricing.title}</h2>
          </div>
          <p style={{ fontSize: 15, color: MUTED_B, lineHeight: 1.6, marginBottom: 8 }}>{t.pricing.note}</p>
        </div>

        <div className="b-row pricing">
          {t.pricing.tiers.map((tier, i) => (
            <PricingCardB key={i} tier={tier} accent={ACCENT_B} t={t} />
          ))}
        </div>
      </section>

      {/* ─── TESTIMONIAL GRID ─── */}
      <section className="b-section" style={{ background: BG_B_ALT }}>
        <KickerB accent={ACCENT_B}>{t.testimonials.kicker}</KickerB>
        <h2 className="b-h2" style={{
          fontFamily: "'Fraunces', Georgia, serif",
          fontWeight: 400,
          lineHeight: 1,
          letterSpacing: -2,
          margin: "20px 0 60px",
        }}>{t.testimonials.title}</h2>

        <div className="b-row testi">
          {t.testimonials.items.map((item, i) => (
            <TestimonialCardB key={i} item={item} accent={ACCENT_B} />
          ))}
        </div>
      </section>

      {/* ─── BOOKING ─── */}
      <section id="booking" className="b-section">
        <div className="b-row booking">
          <div>
            <KickerB accent={ACCENT_B}>{t.book.kicker}</KickerB>
            <h2 className="b-about-title" style={{
              fontFamily: "'Fraunces', Georgia, serif",
              fontWeight: 400,
              lineHeight: 1.05,
              letterSpacing: -1.5,
              margin: "20px 0 32px",
            }}>{t.book.title}</h2>
            <p style={{ fontSize: 16, color: "rgba(236,236,236,.7)", lineHeight: 1.6, maxWidth: 380 }}>
              {lang === "es"
                ? "Cuatro pasos. Te respondo en menos de un día hábil con presupuesto y disponibilidad."
                : "Four steps. I'll get back to you within one business day with availability and a quote."}
            </p>

            <div style={{
              marginTop: 40,
              display: "grid",
              gridTemplateColumns: "1fr",
              gap: 0,
              borderTop: "1px solid rgba(255,255,255,.1)",
            }}>
              {[
                ["AVG. RESPONSE", "< 24h"],
                ["DEPOSIT", "20%"],
                ["TRAVEL", "Worldwide"],
              ].map(([k, v]) => (
                <div key={k} style={{
                  display: "flex",
                  justifyContent: "space-between",
                  padding: "16px 0",
                  borderBottom: "1px solid rgba(255,255,255,.1)",
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 12,
                  letterSpacing: 1.5,
                }}>
                  <span style={{ color: MUTED_B }}>{k}</span>
                  <span style={{ color: FG_B }}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{
            background: BG_B_ALT,
            padding: "clamp(28px, 4vw, 48px)",
            borderRadius: 6,
            border: "1px solid rgba(255,255,255,.08)",
          }}>
            <BookingWizard t={t} accent={ACCENT_B} variant="b" />
          </div>
        </div>
      </section>

      {/* ─── CONTACT ─── */}
      <section id="contact" className="b-section" style={{ background: BG_B_ALT, borderTop: "1px solid rgba(255,255,255,.06)" }}>
        <div className="b-row contact">
          <div>
            <KickerB accent={ACCENT_B}>{t.contact.kicker}</KickerB>
            <h2 className="b-h2-large" style={{
              fontFamily: "'Fraunces', Georgia, serif",
              fontWeight: 400,
              lineHeight: 0.95,
              letterSpacing: -2.5,
              margin: "20px 0 0",
            }}>{t.contact.title}</h2>
          </div>
          <div style={{ display: "grid", gap: 24 }}>
            {[
              [lang === "es" ? "Email" : "Email", t.contact.email],
              [lang === "es" ? "Teléfono" : "Phone", t.contact.phone],
              [lang === "es" ? "Base" : "Based", t.contact.city],
            ].map(([k, v]) => (
              <div key={k}>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11,
                  letterSpacing: 2,
                  color: MUTED_B,
                  textTransform: "uppercase",
                  marginBottom: 6,
                }}>{k}</div>
                <div style={{ fontSize: "clamp(18px, 2vw, 22px)", color: FG_B, letterSpacing: -0.3 }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ─── FOOTER ─── */}
      <footer style={{
        padding: "clamp(48px, 7vw, 80px) var(--b-pad-x) 48px",
        background: BG_B,
        borderTop: "1px solid rgba(255,255,255,.08)",
      }}>
        <div className="b-row hero-bottom" style={{ marginBottom: 60 }}>
          <div className="b-footer-logo" style={{
            fontFamily: "'Fraunces', Georgia, serif",
            fontWeight: 400,
            letterSpacing: -4,
            lineHeight: 0.85,
          }}>
            Andrei Tatar <span style={{ fontStyle: "italic", color: ACCENT_B }}>DJ</span>
          </div>
          <Waveform accent={ACCENT_B} bars={48} height={56} />
        </div>
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          paddingTop: 24,
          borderTop: "1px solid rgba(255,255,255,.08)",
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11,
          color: MUTED_B,
          letterSpacing: 1.5,
        }}>
          <div>{t.footer.copy}</div>
          <div>{t.footer.built}</div>
        </div>
      </footer>
    </div>
  );
}

// ─── helpers ──────────────────────────────────────────────

const btnPrimaryB = {
  background: ACCENT_B,
  color: "#0a0a0a",
  border: "none",
  padding: "16px 26px",
  fontFamily: "'Inter', sans-serif",
  fontSize: 14,
  fontWeight: 600,
  letterSpacing: 0.2,
  cursor: "pointer",
  borderRadius: 999,
};
const btnGhostB = {
  background: "rgba(255,255,255,.06)",
  color: FG_B,
  border: `1px solid rgba(255,255,255,.18)`,
  padding: "16px 26px",
  fontFamily: "'Inter', sans-serif",
  fontSize: 14,
  fontWeight: 500,
  cursor: "pointer",
  borderRadius: 999,
};

function KickerB({ children, accent, style }) {
  return (
    <div style={{
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      letterSpacing: 2,
      color: accent,
      textTransform: "uppercase",
      display: "flex",
      alignItems: "center",
      gap: 10,
      ...(style || {}),
    }}>
      <span style={{ width: 24, height: 1, background: accent }} />
      <span>{children}</span>
    </div>
  );
}

function NavB({ t, lang, setLang, scrollTo }) {
  const links = [
    { label: t.nav.work, target: "work" },
    { label: t.nav.about, target: "about" },
    { label: t.nav.services, target: "services" },
    { label: t.nav.pricing, target: "rates" },
    { label: t.nav.contact, target: "booking" },
  ];
  return (
    <nav className="b-nav-pad" style={{
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      position: "sticky",
      top: 0,
      zIndex: 50,
      background: "rgba(11,11,13,.7)",
      backdropFilter: "blur(20px)",
      borderBottom: "1px solid rgba(255,255,255,.06)",
      gap: 16,
    }}>
      <div style={{
        fontFamily: "'Fraunces', Georgia, serif",
        fontSize: "clamp(22px, 2.5vw, 28px)",
        letterSpacing: -0.8,
        flexShrink: 0,
      }}>
        Andrei Tatar <span style={{ fontStyle: "italic", color: ACCENT_B }}>DJ</span>
      </div>
      <div className="b-nav-links" style={{
        display: "flex",
        gap: 36,
        fontSize: 14,
        fontWeight: 500,
      }}>
        {links.map((l) => (
          <a
            key={l.label}
            href={`#${l.target}`}
            onClick={scrollTo(l.target)}
            style={{ color: "rgba(236,236,236,.75)", textDecoration: "none", cursor: "pointer" }}
          >{l.label}</a>
        ))}
      </div>
      <div style={{ display: "flex", gap: 14, alignItems: "center", flexShrink: 0 }}>
        <LangToggle lang={lang} setLang={setLang} accent={ACCENT_B} />
        <button
          onClick={scrollTo("booking")}
          style={{
            background: ACCENT_B,
            color: "#0a0a0a",
            border: "none",
            padding: "10px 20px",
            fontSize: 13,
            fontWeight: 600,
            cursor: "pointer",
            borderRadius: 999,
          }}
        >{t.nav.book} →</button>
      </div>
    </nav>
  );
}

function ServiceCardB({ item, accent }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: 36,
        background: BG_B,
        border: "1px solid rgba(255,255,255,.08)",
        borderRadius: 8,
        transition: "transform .25s, border-color .25s",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        borderColor: hover ? accent : "rgba(255,255,255,.08)",
        cursor: "pointer",
        minHeight: 280,
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
      }}
    >
      <div>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11,
          letterSpacing: 2,
          color: accent,
          marginBottom: 24,
        }}>— {item.id}</div>
        <h3 style={{
          fontFamily: "'Fraunces', Georgia, serif",
          fontSize: 38,
          fontWeight: 400,
          lineHeight: 1.05,
          letterSpacing: -1,
          margin: "0 0 16px",
        }}>{item.t}</h3>
        <p style={{ fontSize: 15, color: "rgba(236,236,236,.65)", lineHeight: 1.55, margin: 0 }}>
          {item.d}
        </p>
      </div>
      <div style={{
        marginTop: 24,
        fontSize: 13,
        color: hover ? accent : MUTED_B,
        fontFamily: "'JetBrains Mono', monospace",
        letterSpacing: 1.5,
        textTransform: "uppercase",
        transition: "color .2s",
      }}>
        {hover ? "→" : "○"}
      </div>
    </div>
  );
}

function FeaturedQuoteB({ t, accent }) {
  const featured = t.testimonials.items[0];
  return (
    <section style={{
      padding: "clamp(80px, 12vw, 140px) var(--b-pad-x)",
      background: BG_B,
      borderTop: "1px solid rgba(255,255,255,.06)",
      borderBottom: "1px solid rgba(255,255,255,.06)",
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{
          fontFamily: "'Fraunces', Georgia, serif",
          fontSize: "clamp(110px, 14vw, 180px)",
          color: accent,
          lineHeight: 0.5,
          marginBottom: 20,
          fontWeight: 400,
        }}>"</div>
        <blockquote style={{
          margin: 0,
          fontFamily: "'Fraunces', Georgia, serif",
          fontSize: "clamp(28px, 4.4vw, 48px)",
          fontWeight: 300,
          lineHeight: 1.2,
          letterSpacing: -1,
          textWrap: "pretty",
        }}>
          {featured.q}
        </blockquote>
        <div style={{ marginTop: 48, display: "flex", alignItems: "center", gap: 16 }}>
          <div style={{
            width: 56,
            height: 56,
            borderRadius: 28,
            background: "repeating-linear-gradient(45deg, #1a1a1a 0 8px, #1f1f1f 8px 16px)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 9,
            color: "rgba(255,255,255,.3)",
          }}>L&amp;P</div>
          <div>
            <div style={{
              fontFamily: "'Fraunces', Georgia, serif",
              fontSize: 22,
              fontStyle: "italic",
            }}>{featured.a}</div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 11,
              color: MUTED_B,
              letterSpacing: 1.5,
              marginTop: 4,
            }}>{featured.r}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function GalleryTileB({ g, large, accent }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        height: "100%",
        position: "relative",
        overflow: "hidden",
        background: "repeating-linear-gradient(135deg, #131316 0 14px, #16161a 14px 28px)",
        cursor: "pointer",
        borderRadius: 4,
      }}
    >
      <div style={{
        position: "absolute",
        inset: 0,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        color: "rgba(255,255,255,.18)",
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: large ? 13 : 10,
        letterSpacing: 2,
        opacity: hover ? 0 : 1,
        transition: "opacity .3s",
      }}>[ PHOTO ]</div>

      <div style={{
        position: "absolute",
        inset: 0,
        background: `linear-gradient(180deg, transparent 50%, rgba(0,0,0,.85) 100%)`,
        opacity: hover ? 1 : 0.7,
        transition: "opacity .3s",
      }} />

      <div style={{
        position: "absolute",
        left: 20,
        right: 20,
        bottom: 20,
        transform: hover ? "translateY(0)" : "translateY(8px)",
        transition: "transform .25s",
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10,
          letterSpacing: 2,
          color: accent,
          marginBottom: 8,
          textTransform: "uppercase",
        }}>{g.l}</div>
        <div style={{
          fontFamily: "'Fraunces', Georgia, serif",
          fontSize: large ? 40 : 22,
          fontWeight: 400,
          letterSpacing: -0.6,
          lineHeight: 1.05,
          color: FG_B,
          marginBottom: 6,
        }}>{g.v}</div>
        {large && (
          <div style={{ fontSize: 14, color: "rgba(236,236,236,.7)", marginTop: 8 }}>{g.cap}</div>
        )}
      </div>
    </div>
  );
}

function PricingCardB({ tier, accent, t }) {
  return (
    <div style={{
      padding: 36,
      borderRadius: 8,
      background: tier.featured ? "#14141a" : BG_B_ALT,
      border: tier.featured ? `1px solid ${accent}` : "1px solid rgba(255,255,255,.08)",
      position: "relative",
    }}>
      {tier.featured && (
        <div style={{
          position: "absolute",
          top: -10,
          left: 24,
          background: accent,
          color: "#0a0a0a",
          padding: "4px 12px",
          borderRadius: 999,
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10,
          fontWeight: 700,
          letterSpacing: 1.5,
        }}>POPULAR</div>
      )}
      <div style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        letterSpacing: 2,
        color: accent,
        marginBottom: 28,
        textTransform: "uppercase",
      }}>{tier.name}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 6 }}>
        <div style={{
          fontFamily: "'Fraunces', Georgia, serif",
          fontSize: 72,
          fontWeight: 400,
          letterSpacing: -2,
          lineHeight: 1,
        }}>{tier.price}</div>
        <div style={{ fontSize: 13, color: MUTED_B }}>{tier.unit}</div>
      </div>
      <div style={{ fontSize: 14, color: MUTED_B, marginBottom: 32, fontStyle: "italic", fontFamily: "'Fraunces', serif" }}>{tier.ideal}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
        {tier.features.map((f, i) => (
          <li key={i} style={{
            padding: "12px 0",
            borderTop: "1px solid rgba(255,255,255,.06)",
            fontSize: 14,
            display: "flex",
            gap: 12,
            color: "rgba(236,236,236,.85)",
          }}>
            <span style={{ color: accent, flexShrink: 0 }}>✓</span>
            <span>{f}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function TestimonialCardB({ item, accent }) {
  return (
    <div style={{
      padding: 36,
      background: BG_B,
      borderRadius: 6,
      border: "1px solid rgba(255,255,255,.06)",
    }}>
      <p style={{
        fontFamily: "'Fraunces', Georgia, serif",
        fontSize: 22,
        lineHeight: 1.4,
        margin: "0 0 28px",
        color: "rgba(236,236,236,.9)",
        fontWeight: 300,
      }}>"{item.q}"</p>
      <div style={{ display: "flex", alignItems: "center", gap: 14, paddingTop: 20, borderTop: "1px solid rgba(255,255,255,.08)" }}>
        <div style={{
          width: 36,
          height: 36,
          borderRadius: 18,
          background: "repeating-linear-gradient(45deg, #1a1a1a 0 6px, #1f1f1f 6px 12px)",
          flexShrink: 0,
        }} />
        <div>
          <div style={{ fontSize: 15, fontWeight: 500 }}>{item.a}</div>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11,
            color: accent,
            letterSpacing: 1.5,
            marginTop: 2,
          }}>{item.r}</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { VariationB });