// sections.jsx — all page sections

const PRODUCTS = [
  {
    key: "mini_duffle",
    name: "Essential Mini Duffle",
    badge: "MOST POPULAR",
    badgeClass: "red",
    price: "$59.95",
    copy: "Big enough for a whole day. Small enough to grab and go.",
    cta: "Shop Mini Duffle",
    href: "https://firebarlabs.com/products/smell-proof-mini-duffle-bag-lockable-firebar-smell-proof-fashion",
    img: "https://cdn.shopify.com/s/files/1/0624/2362/9885/files/firebar-labs-smell-proof-mini-duffle-bag-lockable-smell-proof-fashion-fbs-mdb-001-3126995.jpg",
  },
  {
    key: "crossbody_exec",
    name: "Executive Tech Crossbody",
    badge: "USB-C FAST CHARGE",
    price: "$89.00",
    copy: "Hands-free. Hidden lock. Your phone doesn't die.",
    cta: "Shop Crossbody",
    href: "https://firebarlabs.com/products/firebar-labs-smell-proof-executive-cross-body",
    img: "https://cdn.shopify.com/s/files/1/0624/2362/9885/files/firebar-labs-smell-proof-executive-cross-body-wusb-c-fast-charge-port-smell-proof-fashion-558615.jpg",
  },
  {
    key: "backpack",
    name: "Executive Tech Adventure Backpack",
    badge: "FITS 15\" LAPTOP",
    price: "$129.00",
    copy: "Built for a full week on the road. Laptop sleeve, USB-C, the works.",
    cta: "Shop Backpack",
    href: "https://firebarlabs.com/products/firebar-labs-smell-proof-adventure-backpack",
    img: "https://cdn.shopify.com/s/files/1/0624/2362/9885/files/firebar-labs-smell-proof-adventure-backpack-wusb-c-fast-charge-port-smell-proof-fashion-630267.jpg",
  },
  {
    key: "crossbody_essential",
    name: "Essential Crossbody",
    badge: "EVERYDAY CARRY",
    price: "$69.95",
    copy: "The daily crossbody. Hidden lock, discreet profile, still smell-proof.",
    cta: "Shop Essential Crossbody",
    href: "https://firebarlabs.com/products/smell-proof-cross-body-bag-lockable",
    img: "https://cdn.shopify.com/s/files/1/0624/2362/9885/files/firebar-labs-smell-proof-cross-body-bag-lockable-smell-proof-fashion-166845.jpg",
  },
];

const PBAL_VIDEOS = [
  {
    poster: "https://cdn.shopify.com/s/files/1/0624/2362/9885/files/preview_images/374915bd90f14103ac3065e32ece458a.thumbnail.0000000000.jpg",
    mp4: "https://cdn.shopify.com/videos/c/vp/374915bd90f14103ac3065e32ece458a/374915bd90f14103ac3065e32ece458a.HD-720p-1.6Mbps-44919947.mp4",
    hls: "https://cdn.shopify.com/videos/c/vp/374915bd90f14103ac3065e32ece458a/374915bd90f14103ac3065e32ece458a.m3u8",
    caption: "The STFU Rule, explained.",
  },
  {
    poster: "https://cdn.shopify.com/s/files/1/0624/2362/9885/files/preview_images/9bb40433bb2249639b9d2934f24772d6.thumbnail.0000000000.jpg",
    mp4: "https://cdn.shopify.com/videos/c/vp/9bb40433bb2249639b9d2934f24772d6/9bb40433bb2249639b9d2934f24772d6.HD-720p-1.6Mbps-45782013.mp4",
    hls: "https://cdn.shopify.com/videos/c/vp/9bb40433bb2249639b9d2934f24772d6/9bb40433bb2249639b9d2934f24772d6.m3u8",
    caption: "What to do if you get pulled over.",
  },
  {
    poster: "https://cdn.shopify.com/s/files/1/0624/2362/9885/files/preview_images/d65a6c745996415399ae0b7e6bf4d681.thumbnail.0000000000.jpg",
    mp4: "https://cdn.shopify.com/videos/c/vp/d65a6c745996415399ae0b7e6bf4d681/d65a6c745996415399ae0b7e6bf4d681.HD-720p-1.6Mbps-46101158.mp4",
    hls: "https://cdn.shopify.com/videos/c/vp/d65a6c745996415399ae0b7e6bf4d681/d65a6c745996415399ae0b7e6bf4d681.m3u8",
    caption: "Why this bag is the tool.",
  },
];

const SMOKE_BG = "https://stfubags.com/videos/smoke-720.mp4";
const SMOKE_BG_POSTER = "https://stfubags.com/videos/smoke-poster.jpg";

const HEADLINES = {
  A: { h: "Don't give them a reason to search you.", s: "Activated coconut charcoal. Hidden combination lock. Legal in all 50 states. Endorsed by the STFU Guys." },
  B: { h: "#STFU. Let the bag do the work.", s: "The smell-proof, anti-theft bag Pot Brothers at Law endorse. Because the less you explain, the less you have to explain." },
  C: { h: "Premium smell-proof. Hidden lock. No questions asked.", s: "The only smell-proof bag endorsed by Pot Brothers at Law. Real-world tested, legal in all 50 states." },
};

const FAQ = [
  { q: "Is this bag actually smell-proof?", a: "Yes. Every bag uses activated coconut charcoal lining, premium airtight YKK-grade zippers, reinforced stitching, and multi-layer smell-proof liners running through every pocket and compartment. It's been extensively tested in controlled conditions — no amateur sniff tests." },
  { q: "Is it legal to own?", a: "Yes, in all 50 U.S. states. The bag itself is a container. How you use it is up to you and your local law." },
  { q: "What's different about the lock?", a: "It's a hidden programmable combination lock with an industry-leading anti-hack design. The internal dial construction is built differently than competitor locks — the technique that defeats most combination locks doesn't work on ours." },
  { q: "What does \"Pot Brothers at Law endorsed\" mean?", a: "Craig and Marc Wasserman — the PBAL duo — have licensed their endorsement to FireBar Labs for the smell-proof bag line. They back the product and they appear in our videos. It's a real partnership, not a paid ad." },
  { q: "Who actually makes the bag?", a: "FireBar Labs, a California-based brand. We design, source materials, and quality-control every SKU." },
  { q: "Is this the \"STFU Bag\" from their videos?", a: "Yes. STFUBags.com is the dedicated landing page for the bag line PBAL endorses. Click any \"Shop\" button and you'll land on firebarlabs.com (our main store) to check out." },
  { q: "Why does checkout happen on firebarlabs.com?", a: "FireBar Labs is the parent brand. STFUBags.com is a dedicated landing experience for this partnership. All orders ship through firebarlabs.com with the same support, shipping, and return policy." },
  { q: "What's the return policy?", a: "30 days for unused bags with tags, satisfaction guarantee for defects." },
  { q: "How fast does it ship?", a: "Free shipping on orders over $75. Ships from California. Orders placed before 3pm PT on weekdays typically go out same-day." },
  { q: "What does the Executive line have that the Essential line doesn't?", a: "USB-C fast-charge port, more laptop-compatible sleeves, upgraded exterior material, and more color options. Essential has the same core smell-proof and lock tech at a lower price." },
];

// ---------- Topbar ----------
function Topbar() {
  return (
    <div className="topbar">
      <div className="topbar-inner">
        <span className="topbar-dot"></span>
        <span>Free shipping on orders $75+</span>
        <span style={{opacity:0.4}}>·</span>
        <span>Ships from California</span>
      </div>
    </div>
  );
}

// ---------- Header ----------
function Header() {
  return (
    <header className="header">
      <div className="header-inner">
        <a className="wordmark" href="#top" aria-label="STFUBags.com">
          <span className="wm-stfu">STFU</span><span className="wm-bags">Bags</span><span className="wm-tld">.com</span>
        </a>
        <div className="partner-tag">
          In partnership with<br/><b>Pot Brothers at Law</b>
        </div>
      </div>
    </header>
  );
}

// ---------- Hero ----------
function Hero({ state }) {
  const product = PRODUCTS.find(p => p.key === state.heroImage) || PRODUCTS[0];
  const { h, s } = HEADLINES[state.headlineVariant] || HEADLINES.A;
  const wrapRef = useRef(null);
  const scrollToVideos = () => {
    const el = document.getElementById("pbal-videos");
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: "smooth" });
  };
  const onMove = (e) => {
    const el = wrapRef.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const x = ((e.clientX - r.left) / r.width) * 100;
    const y = ((e.clientY - r.top) / r.height) * 100;
    el.style.setProperty("--mx", x + "%");
    el.style.setProperty("--my", y + "%");
  };
  return (
    <section className="hero video-bg-section" id="top" data-screen-label="Hero">
      <VideoBg src={SMOKE_BG} poster={SMOKE_BG_POSTER} style={{ filter: "brightness(0.55) contrast(1.08)" }} />
      <div className="video-bg-tint" style={{background:"rgba(8,10,18,0.48)"}} />
      <div className="video-bg-vignette" />
      <div className="video-bg-fade-top" />
      <div className="video-bg-fade-bottom" />

      <div className="container video-bg-content">
        <div className="hero-grid">
          <div>
            <FadeUp delay={100}>
              <div className="hero-eyebrow eyebrow">
                <span style={{color:"var(--accent)"}}>§</span>
                POT BROTHERS AT LAW × FIREBAR LABS
                <span style={{opacity:0.4}}>·</span>
                SMELL-PROOF &amp; LOCKABLE
              </div>
            </FadeUp>
            <h1 className="h-display"><BlurText stagger={110}>{h}</BlurText></h1>
            <FadeUp delay={800}><p className="hero-sub">{s}</p></FadeUp>
            <FadeUp delay={1000}>
              <div className="hero-ctas">
                <CTA href="https://firebarlabs.com/collections/smell-proof-fashion">Shop Smell-Proof Bags</CTA>
                <button className="cta-link" onClick={scrollToVideos}><span className="ctal-dot"/><span className="ctal-text">Watch PBAL&rsquo;s Take</span><span className="ctal-bar"/></button>
              </div>
            </FadeUp>
            <FadeUp delay={1150}>
              <div className="hero-compliance">
                <span className="hc-dot" /> Ships nationwide · Free over $75
              </div>
            </FadeUp>
          </div>
          <FadeUp delay={300}>
            <div className="hero-image-wrap liquid-glass" ref={wrapRef} onMouseMove={onMove}>
              <div className="hero-spotlight" aria-hidden="true" />
              <img src={product.img} alt={product.name} />
              <div className="pbal-stamp"><span className="d"></span>PBAL Endorsed</div>
              <div className="hero-corner-tl" aria-hidden="true" />
              <div className="hero-corner-br" aria-hidden="true" />
            </div>
          </FadeUp>
        </div>
      </div>
    </section>
  );
}

// ---------- Trust strip (floats over hero/next-section boundary) ----------
function TrustStrip() {
  const cells = [
    { label: "Endorsed by", value: "Pot Brothers at Law" },
    { label: "Legal in", value: "All 50 States" },
    { label: "Customer rating", value: <>4.8<span style={{color:"var(--accent)"}}>★</span></> },
    { label: "Following", value: <>1.2M+ <small>@potbrothersatlaw</small></> },
  ];
  return (
    <div className="container trust-wrap">
      <FadeUp>
        <div className="trust-strip liquid-glass-strong">
          {cells.map((c, i) => (
            <div key={i} className="trust-cell">
              <div className="trust-label">{c.label}</div>
              <div className="trust-value">{c.value}</div>
            </div>
          ))}
        </div>
      </FadeUp>
    </div>
  );
}

// ---------- Features ----------
function Features() {
  const feats = [
    { icon: <Icon.Shield />, title: "Activated coconut charcoal lining", body: "Keeps the smell in. Keeps every nose out." },
    { icon: <Icon.Lock />, title: "Hidden combination lock", body: "Industry-leading anti-hack design. The dial construction is different." },
    { icon: <Icon.Bolt />, title: "USB-C fast-charge port", body: "Built in on the Executive line — your phone doesn't die on you." },
    { icon: <Icon.Lock />, title: "Premium airtight zippers", body: "YKK-grade, fully sealing. The zipper is where cheap bags leak first." },
    { icon: <Icon.Shield />, title: "Multi-layer construction", body: "Smell-proof liners stacked through every pocket and compartment." },
    { icon: <Icon.Bolt />, title: "Lifetime workmanship warranty", body: "If the stitching, zipper, or lock ever fails on us — we replace it. Full stop." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <Kicker n="01">Why the bag holds up</Kicker>
          <h2 className="h-section"><BlurText>Bags built to our standard, not the industry's.</BlurText></h2>
        </div>
        <div className="features-grid">
          {feats.map((f, i) => (
            <FadeUp key={i} delay={i * 120}>
              <div className="feature-card liquid-glass">
                <div className="feature-icon liquid-glass-strong">{f.icon}</div>
                <h3 className="h-card feature-title">{f.title}</h3>
                <p className="feature-body">{f.body}</p>
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- PBAL video module ----------
function PBALVideos() {
  return (
    <section className="section" id="pbal-videos" style={{background:"radial-gradient(ellipse at top, rgba(200,16,46,0.08), transparent 60%)"}}>
      <div className="container">
        <div className="section-head">
          <Kicker n="02">Pot Brothers at Law × FireBar Labs</Kicker>
          <h2 className="h-section"><BlurText>The STFU Guys approve. Literally.</BlurText></h2>
          <FadeUp delay={200}>
            <p className="sub">Craig and Marc Wasserman — California cannabis defense attorneys with 30+ years combined — back the bag.</p>
          </FadeUp>
        </div>
        <div className="pbal-grid">
          {PBAL_VIDEOS.map((v, i) => (
            <FadeUp key={i} delay={i * 120}>
              <VideoCard {...v} />
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Products ----------
function Products() {
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <Kicker n="03">The lineup</Kicker>
          <h2 className="h-section"><BlurText>One promise. Every way you carry.</BlurText></h2>
        </div>
        <div className="products-grid">
          {PRODUCTS.map((p, i) => (
            <FadeUp key={p.key} delay={i * 90}>
              <a className="product-card liquid-glass" href={p.href} target="_blank" rel="noopener" style={{padding:"10px"}}>
                <div className="product-img">
                  <span className={`product-badge ${p.badgeClass || ""}`}>{p.badge}</span>
                  <img src={p.img} alt={p.name} loading="lazy" />
                </div>
                <h3 className="product-title">{p.name}</h3>
                <p className="product-copy">{p.copy}</p>
                <div className="product-footer">
                  <span className="product-price">{p.price}</span>
                  <span className="product-cta">{p.cta} <span className="arr"><Icon.ArrowUpRight size={13} /></span></span>
                </div>
              </a>
            </FadeUp>
          ))}
        </div>
        <div className="see-all">
          <a className="cta-link" href="https://firebarlabs.com/collections/smell-proof-fashion" target="_blank" rel="noopener"><span className="ctal-dot"/><span className="ctal-text">See every smell-proof style</span><span className="ctal-bar"/></a>
        </div>
      </div>
    </section>
  );
}

// ---------- Legal Veterans cinematic ----------
function LegalVeterans() {
  return (
    <section className="section legal-vet-section video-bg-section">
      <VideoBg src={SMOKE_BG} poster={SMOKE_BG_POSTER} style={{ filter: "brightness(0.55) contrast(1.08) saturate(1.15)" }} />
      <div className="video-bg-tint" style={{background:"rgba(8,10,18,0.55)"}} />
      <div className="video-bg-vignette" />
      <div className="video-bg-fade-top" />
      <div className="video-bg-fade-bottom" />

      <div className="container video-bg-content">
        <div className="legal-vet-content">
          <FadeUp><Kicker n="04">Legal veterans, real backing</Kicker></FadeUp>
          <h2 className="h-section" style={{marginTop:20, fontSize:"clamp(44px, 6vw, 80px)"}}>
            <BlurText>30+ years of courtroom experience.<br/>Legends of the cannabis movement.</BlurText>
          </h2>
          <FadeUp delay={300}>
            <p className="legal-vet-caption">Craig and Marc Wasserman — the Pot Brothers at Law — are legends of the cannabis movement. 30+ years defending Californians, millions of followers, and a voice the community actually trusts. They put their names on this bag because it works.</p>
          </FadeUp>
          <FadeUp delay={650}>
            <div style={{marginTop:48, display:"inline-flex", gap:14, flexWrap:"wrap", justifyContent:"center"}}>
              <CTA href="https://firebarlabs.com/collections/smell-proof-fashion">Shop Smell-Proof Bags</CTA>
              <button className="cta-link" onClick={() => { const el = document.getElementById("pbal-videos"); if (el) window.scrollTo({top: el.offsetTop - 60, behavior:"smooth"}); }}><span className="ctal-dot"/><span className="ctal-text">Watch the videos</span><span className="ctal-bar"/></button>
            </div>
          </FadeUp>
        </div>
      </div>
    </section>
  );
}

// ---------- Marquee proof ticker ----------
function MarqueeTicker() {
  const items = [
    "Endorsed by Pot Brothers at Law",
    "Activated coconut charcoal lining",
    "Hidden combination lock",
    "Legal in all 50 states",
    "Ships from California",
    "4.8★ customer rating",
    "Free shipping on orders $75+",
    "Satisfaction guarantee",
  ];
  const row = [...items, ...items];
  return (
    <section className="marquee-section" aria-hidden="true">
      <div className="marquee-track">
        {row.map((t, i) => (
          <span key={i} className="marquee-item">
            <span className="m-star" aria-hidden="true">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 0 L8.4 5.6 L14 7 L8.4 8.4 L7 14 L5.6 8.4 L0 7 L5.6 5.6 Z" fill="currentColor"/></svg>
            </span>
            <span className="m-text">{t}</span>
          </span>
        ))}
      </div>
    </section>
  );
}

// ---------- Pull quote editorial ----------
function PullQuote() {
  // The Script © 2015 Craig & Marc Wasserman — 29 words.
  // Canonical order per potbrothersatlaw.com / "Why STFU".
  const lines = [
    { said: "Why did you pull me over?" },
    { said: "I'm not discussing my day." },
    { said: "Am I being detained, or am I free to go?" },
    { said: "I invoke the 5th. I want my lawyer.", note: "(if detained)" },
  ];
  return (
    <section className="section pullquote-section">
      <div className="container">
        <FadeUp>
          <div className="pq-wrap">
            <div className="pq-rail" aria-hidden="true">
              <span className="pq-rail-tick" />
              <span className="pq-rail-line" />
              <span className="pq-rail-label">The Script · 29 words</span>
              <span className="pq-rail-line" />
              <span className="pq-rail-tick" />
            </div>
            <div className="pq-lede">
              Pot Brothers at Law teach one thing above all else. If a cop asks questions,<br/>
              these are the only words you use. Then you shut the fuck up.
            </div>
            <div className="pq-script">
              {lines.map((l, i) => (
                <div key={i} className="scr-line scr-you">
                  <span className="scr-num">{String(i + 1).padStart(2, "0")}</span>
                  <span className="scr-said">
                    &ldquo;{l.said}&rdquo;
                    {l.note && <span className="scr-note"> {l.note}</span>}
                  </span>
                </div>
              ))}
              <div className="scr-coda-big">
                <div className="scr-coda-rule" />
                <div className="scr-coda-headline">
                  <span className="scr-coda-then">Then you</span>
                  <span className="scr-coda-stfu">#STFU</span>
                </div>
                <div className="scr-coda-rule" />
              </div>
            </div>
            <div className="pq-attrib">
              <div className="pq-attrib-line" />
              <div className="pq-attrib-text">
                <div className="pq-name">Craig &amp; Marc Wasserman</div>
                <div className="pq-role">The Script&nbsp;© 2015 · Pot Brothers at Law</div>
              </div>
              <div className="pq-attrib-line" />
            </div>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

// ---------- Press / "As covered in" strip ----------
function PressStrip() {
  const names = ["High Times", "Leafly", "The Fresh Toast", "Marijuana Moment", "Benzinga", "Hypebeast"];
  return (
    <section className="press-section">
      <div className="container">
        <div className="press-inner">
          <div className="press-label"><span className="press-label-dot" />As discussed in</div>
          <div className="press-names">
            {names.map((n, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span className="press-sep" aria-hidden="true">/</span>}
                <span className="press-name">{n}</span>
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Credentials ----------
function CountUp({ value, suffix, duration = 1600 }) {
  // parse leading numeric portion, keep any trailing string (e.g. '+', 'M+', '.8★')
  const m = String(value).match(/^([\d.]+)(.*)$/);
  const target = m ? parseFloat(m[1]) : 0;
  const tail = m ? m[2] : "";
  const isFloat = String(target).includes(".");
  const ref = useRef(null);
  const [n, setN] = useState(0);
  const [started, setStarted] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el || started) return;
    const kick = () => {
      setStarted(true);
      const t0 = performance.now();
      const tick = (t) => {
        const p = Math.min(1, (t - t0) / duration);
        const eased = 1 - Math.pow(1 - p, 3);
        setN(target * eased);
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    };
    const r = el.getBoundingClientRect();
    if (r.top < window.innerHeight && r.bottom > 0) { kick(); return; }
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { kick(); io.disconnect(); } }, { threshold: 0.2 });
    io.observe(el); return () => io.disconnect();
  }, [target, duration, started]);
  const display = isFloat ? n.toFixed(1) : Math.round(n).toLocaleString();
  return (
    <span ref={ref}>
      {display}{tail}
      {suffix && <span style={{fontSize:"0.42em", color:"var(--ink-dim)", marginLeft:10, letterSpacing:"0.08em", fontStyle:"normal", fontFamily:'"JetBrains Mono", monospace', textTransform:"uppercase"}}>{suffix}</span>}
    </span>
  );
}

function Credentials() {
  const cells = [
    { num: "30+", suffix: "yrs", label: "Combined legal experience" },
    { num: "1.2M+", label: "Following @potbrothersatlaw" },
    { num: "50", suffix: "states", label: "Legal to own" },
    { num: "4.8★", label: "Judge.me customer rating" },
  ];
  return (
    <section className="section video-bg-section" style={{paddingTop:80}}>
      <VideoBg src={SMOKE_BG} poster={SMOKE_BG_POSTER} style={{ filter: "brightness(0.42) contrast(1.1) saturate(0.55)" }} />
      <div className="video-bg-tint" style={{background:"rgba(10,12,18,0.55)"}} />
      <div className="video-bg-vignette" />
      <div className="video-bg-fade-top" />
      <div className="video-bg-fade-bottom" />

      <div className="container video-bg-content">
        <FadeUp>
          <div className="creds-card liquid-glass-strong">
            <div className="creds-grid">
              {cells.map((c, i) => (
                <FadeUp key={i} delay={i * 150} className="creds-cell">
                  <div className="creds-num">
                    <CountUp value={c.num} suffix={c.suffix} />
                  </div>
                  <div className="creds-label">{c.label}</div>
                </FadeUp>
              ))}
            </div>
          </div>
        </FadeUp>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQSection() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section">
      <div className="container">
        <div className="section-head center" style={{margin:"0 auto", textAlign:"center"}}>
          <Kicker n="05">Frequently asked</Kicker>
          <h2 className="h-section" style={{marginTop:16}}><BlurText>The questions real buyers ask.</BlurText></h2>
        </div>
        <div className="faq-list">
          {FAQ.map((f, i) => (
            <FadeUp key={i} delay={i * 40}>
              <div className={`faq-row liquid-glass ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="faq-chev"><Icon.ChevronDown /></span>
                </button>
                <div className="faq-a"><div className="faq-a-inner">{f.a}</div></div>
              </div>
            </FadeUp>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Final CTA band ----------
function FinalCTA() {
  return (
    <section className="section final-cta-section video-bg-section">
      <VideoBg src={SMOKE_BG} poster={SMOKE_BG_POSTER} style={{ filter: "brightness(0.48) contrast(1.15) saturate(1.1)" }} />
      <div className="video-bg-tint" style={{background:"rgba(8,10,18,0.5)"}} />
      <div className="video-bg-vignette" />
      <div className="video-bg-fade-top" />
      <div className="video-bg-fade-bottom" />

      <div className="final-cta-inner">
        <FadeUp><div className="final-kicker">§ 07 — The Rule</div></FadeUp>
        <h2 className="final-h"><BlurText stagger={140}>#STFU.<br/><em className="final-em">Get the bag.</em></BlurText></h2>
        <FadeUp delay={400}><p className="final-sub">The less you explain, the less you have to explain.</p></FadeUp>
        <FadeUp delay={600}>
          <CTA href="https://firebarlabs.com/collections/smell-proof-fashion" variant="red">Shop Smell-Proof Bags</CTA>
        </FadeUp>
        <FadeUp delay={800}>
          <div className="final-fineprint">Ships from California · Free over $75</div>
        </FadeUp>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="ft-row">
          © 2022–2026 FireBar Labs, Inc.
          <span className="socials">
            <a href="https://x.com/firebarlabs" aria-label="X"><Icon.X /></a>
            <a href="https://instagram.com/firebarlabs" aria-label="Instagram"><Icon.Instagram /></a>
            <a href="https://tiktok.com/@firebarlabs" aria-label="TikTok"><Icon.TikTok /></a>
          </span>
        </div>
        <div className="ft-row">Legal in all 50 states · Ships from California · Free shipping on orders $75+</div>
        <div className="ft-row">STFUBags.com is a FireBar Labs property. All orders processed through firebarlabs.com.</div>
        <div className="ft-row">
          <a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Accessibility</a> · <a href="#">Contact</a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Topbar, Header, Hero, TrustStrip, MarqueeTicker, Features, PullQuote, PBALVideos, PressStrip, Products, LegalVeterans, Credentials, FAQSection, FinalCTA, Footer });