// variant-bside.jsx — Variant A: B-SIDE / VU METER / dot-matrix / mixtape
// Heavy retro analog, scan-lines, pink + cream on near-black, dot-matrix monospace details.

const BS = {
  bg: '#0a0612',
  bg2: '#120a1f',
  ink: '#f5ecff',
  inkDim: 'rgba(245,236,255,0.55)',
  inkFaint: 'rgba(245,236,255,0.22)',
  pink: '#ff2d92',
  cream: '#f6e7c1',
  grid: 'rgba(245,236,255,0.05)',
  hair: 'rgba(245,236,255,0.12)',
  display: '#Big Shoulders Display',
};

const monoFont = "'JetBrains Mono', ui-monospace, monospace";
const displayFont = "'Big Shoulders Display', system-ui, sans-serif";

function BSChip({ children, color = BS.pink, fill = false }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontFamily: monoFont, fontWeight: 600, fontSize: 11, letterSpacing: '0.18em',
      textTransform: 'uppercase',
      padding: '4px 10px',
      border: `1px solid ${fill ? 'transparent' : color}`,
      background: fill ? color : 'transparent',
      color: fill ? '#0a0612' : color,
      borderRadius: 999,
    }}>{children}</span>
  );
}

function BSTagline() {
  return (
    <div style={{ fontFamily: monoFont, fontSize: 10, letterSpacing: '0.35em', color: BS.cream, opacity: 0.7 }}>
      ── A B-SIDE · TRACK 01 · HOME KARAOKE ──
    </div>
  );
}

// Section number tab on the left edge — like a vinyl side marker
function BSSectionTab({ track, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
      <div style={{
        fontFamily: monoFont, fontWeight: 700, fontSize: 11, letterSpacing: '0.25em',
        color: BS.pink, background: 'rgba(255,45,146,0.08)', border: `1px solid ${BS.pink}`,
        padding: '4px 10px', borderRadius: 2,
      }}>{track}</div>
      <div style={{ flex: 1, height: 1, background: BS.hair }} />
      <div style={{ fontFamily: monoFont, fontSize: 11, letterSpacing: '0.3em', color: BS.inkDim, textTransform: 'uppercase' }}>{label}</div>
    </div>
  );
}

// Top navbar — cassette/B-side feel
function BSNav() {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 56px', borderBottom: `1px solid ${BS.hair}`,
      position: 'sticky', top: 0, background: 'rgba(10,6,18,0.85)', backdropFilter: 'blur(8px)', zIndex: 5,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <VUBars count={5} color={BS.pink} height={22} width={3} gap={3} />
        <span style={{ fontFamily: displayFont, fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em' }}>kantahan<span style={{ color: BS.pink }}>.app</span></span>
      </div>
      <nav style={{ display: 'flex', gap: 28, fontFamily: monoFont, fontSize: 12, letterSpacing: '0.15em', textTransform: 'uppercase' }}>
        <a href="#features" style={{ color: BS.ink, textDecoration: 'none' }}>Features</a>
        <a href="#pricing" style={{ color: BS.ink, textDecoration: 'none' }}>Pricing</a>
        <a href="#kantahan" style={{ color: BS.ink, textDecoration: 'none' }}>The word</a>
        <a href="#faq" style={{ color: BS.ink, textDecoration: 'none' }}>FAQ</a>
      </nav>
      <a href={SITE.display} style={{
        fontFamily: monoFont, fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
        color: '#0a0612', background: BS.pink, padding: '9px 16px', textDecoration: 'none', fontWeight: 700,
        borderRadius: 2,
      }}>Launch display ↗</a>
    </div>
  );
}

// Hero
function BSHero() {
  return (
    <section style={{ position: 'relative', padding: '64px 56px 80px', overflow: 'hidden' }}>
      {/* faint dot grid */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: `radial-gradient(${BS.grid} 1px, transparent 1px)`,
        backgroundSize: '24px 24px',
        opacity: 0.6,
        pointerEvents: 'none',
      }} />
      {/* pink halo */}
      <div aria-hidden style={{
        position: 'absolute', top: -120, right: -120, width: 520, height: 520,
        background: 'radial-gradient(circle, rgba(255,45,146,0.22), transparent 60%)',
        filter: 'blur(40px)', pointerEvents: 'none',
      }} />

      <div style={{ position: 'relative', textAlign: 'center' }}>
        <BSTagline />
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 24, marginBottom: 8 }}>
          <AnimatedLogo width={720} showMirror={true} />
        </div>
        <div style={{ marginTop: 28 }}>
          <BSChip>Filipino · Verb · "to sing for someone"</BSChip>
        </div>

        <h1 style={{
          fontFamily: displayFont, fontWeight: 900, fontStretch: '125%',
          fontSize: 92, lineHeight: 0.95, letterSpacing: '-0.02em',
          margin: '34px auto 18px', maxWidth: 1080,
        }}>
          Plug a TV into a laptop.<br />
          <span style={{ color: BS.pink }}>Hand out the QR.</span> Hold court.
        </h1>
        <p style={{
          fontFamily: monoFont, fontSize: 16, lineHeight: 1.6, color: BS.inkDim,
          maxWidth: 640, margin: '0 auto 36px',
        }}>
          Karaoke that lives at one URL. No app installs. Your guests scan, search,
          request — you sing. Free for home, Pro for venues.
        </p>

        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href={SITE.display} style={{
            fontFamily: monoFont, fontWeight: 700, fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: '#0a0612', background: BS.pink, padding: '16px 28px', textDecoration: 'none',
            borderRadius: 2, boxShadow: '0 0 0 1px #ff2d92, 4px 4px 0 0 rgba(255,45,146,0.4)',
          }}>▶ Start a session — free</a>
          <a href="#features" style={{
            fontFamily: monoFont, fontWeight: 600, fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: BS.ink, border: `1px solid ${BS.hair}`, padding: '16px 28px', textDecoration: 'none', borderRadius: 2,
          }}>Tour the deck</a>
        </div>

        {/* status strip */}
        <div style={{
          marginTop: 56, display: 'inline-flex', alignItems: 'center', gap: 28,
          padding: '12px 22px', border: `1px solid ${BS.hair}`, borderRadius: 2,
          fontFamily: monoFont, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: BS.inkDim,
        }}>
          <span><span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: '#4ade80', marginRight: 8, animation: 'pulse-dot 1.6s ease-in-out infinite' }} />display · idle</span>
          <span style={{ color: BS.hair }}>|</span>
          <span>50,000+ tracks</span>
          <span style={{ color: BS.hair }}>|</span>
          <span>0 installs required</span>
        </div>
      </div>

      {/* product screenshot strip — inline app screen mockups */}
      <div style={{ marginTop: 72, display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 14 }}>
        {[
          { mock: MockDisplay,  tag: 'TV / DISPLAY',     cap: 'The shared screen with the QR code' },
          { mock: MockRequest,  tag: 'PHONE / REQUEST',  cap: 'Guests pick songs here' },
          { mock: MockSongbook, tag: 'PHONE / SONGBOOK', cap: 'Sortable A→Z' },
        ].map((s, i) => (
          <figure key={i} style={{ margin: 0, border: `1px solid ${BS.hair}`, background: '#000', borderRadius: 4, overflow: 'hidden' }}>
            <div style={{
              padding: '8px 12px', borderBottom: `1px solid ${BS.hair}`,
              fontFamily: monoFont, fontSize: 10, letterSpacing: '0.25em', color: BS.cream, display: 'flex', justifyContent: 'space-between'
            }}>
              <span>{s.tag}</span>
              <span style={{ display: 'inline-flex', gap: 4 }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'rgba(245,236,255,0.2)' }} />
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'rgba(245,236,255,0.2)' }} />
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: BS.pink }} />
              </span>
            </div>
            <div style={{ height: 220 }}><s.mock /></div>
            <figcaption style={{ padding: '10px 12px', fontFamily: monoFont, fontSize: 11, color: BS.inkDim }}>{s.cap}</figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

// Marquee strip — between sections
function BSMarquee({ text = 'KEEP KARAOKE FREE ★ HOME OR HEADLINE ★ SCAN · SING · REPEAT ★ ' }) {
  const repeated = (text + text + text + text).repeat(2);
  return (
    <div style={{
      borderTop: `1px solid ${BS.hair}`, borderBottom: `1px solid ${BS.hair}`,
      background: BS.pink, color: '#0a0612', overflow: 'hidden', padding: '14px 0',
    }}>
      <div style={{
        whiteSpace: 'nowrap', display: 'inline-block',
        fontFamily: displayFont, fontWeight: 900, fontStretch: '125%', fontSize: 30, letterSpacing: '-0.01em',
        animation: 'marquee 38s linear infinite',
      }}>
        {repeated}
      </div>
    </div>
  );
}

// Three pillars / how it works
function BSHow() {
  const steps = [
    { n: '01', t: 'DISPLAY', sub: 'The TV', body: `Open ${SITE.displayPath} on the laptop, point a TV at it. A big QR shows on screen.`, mock: MockDisplay },
    { n: '02', t: 'REQUEST', sub: 'The phone', body: 'Guests scan, drop their name, search any song. Or paste a YouTube URL.', mock: MockRequest },
    { n: '03', t: 'SING', sub: 'The mic',  body: 'Songs land in the queue. Next one auto-plays. Singer rotation keeps everyone honest.', mock: MockDJ },
  ];

  return (
    <section style={{ padding: '64px 56px', position: 'relative' }}>
      <BSSectionTab track="SIDE A · 01" label="How it works" />
      <h2 style={{ fontFamily: displayFont, fontWeight: 800, fontStretch: '125%', fontSize: 64, margin: '0 0 56px', letterSpacing: '-0.02em' }}>
        Three screens. <span style={{ color: BS.pink }}>One night.</span>
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {steps.map((s) => (
          <div key={s.n} style={{ border: `1px solid ${BS.hair}`, padding: 24, borderRadius: 4, background: 'rgba(245,236,255,0.02)' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 12 }}>
              <span style={{ fontFamily: monoFont, fontWeight: 700, fontSize: 11, letterSpacing: '0.3em', color: BS.pink }}>TRACK</span>
              <span style={{ fontFamily: displayFont, fontWeight: 800, fontSize: 56, lineHeight: 1, color: BS.cream }}>{s.n}</span>
            </div>
            <div style={{ fontFamily: monoFont, fontWeight: 700, fontSize: 11, letterSpacing: '0.3em', color: BS.inkDim, marginBottom: 6 }}>{s.sub.toUpperCase()}</div>
            <div style={{ fontFamily: displayFont, fontWeight: 700, fontStretch: '125%', fontSize: 38, lineHeight: 1, marginBottom: 14 }}>{s.t}</div>
            <p style={{ fontFamily: monoFont, fontSize: 13, lineHeight: 1.6, color: BS.inkDim, margin: '0 0 16px' }}>{s.body}</p>
            <div style={{ border: `1px solid ${BS.hair}`, borderRadius: 2, overflow: 'hidden', background: '#000', height: 170 }}>
              <s.mock />
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Feature grid
function BSFeatures() {
  return (
    <section id="features" style={{ padding: '64px 56px' }}>
      <BSSectionTab track="SIDE A · 02" label="The whole tape" />
      <h2 style={{ fontFamily: displayFont, fontWeight: 800, fontStretch: '125%', fontSize: 64, margin: '0 0 8px', letterSpacing: '-0.02em' }}>
        Tracklist.
      </h2>
      <p style={{ fontFamily: monoFont, fontSize: 14, color: BS.inkDim, margin: '0 0 40px', maxWidth: 560 }}>
        Six features. Each one designed for what actually happens at karaoke night.
      </p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, borderTop: `1px solid ${BS.hair}`, borderLeft: `1px solid ${BS.hair}` }}>
        {FEATURES.map((f, i) => (
          <div key={i} style={{
            padding: 32,
            borderRight: `1px solid ${BS.hair}`, borderBottom: `1px solid ${BS.hair}`,
            position: 'relative',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 14 }}>
              <span style={{ fontFamily: monoFont, fontSize: 11, letterSpacing: '0.25em', color: BS.pink }}>{String(i+1).padStart(2,'0')}</span>
              <span style={{ fontFamily: monoFont, fontSize: 10, letterSpacing: '0.25em', color: BS.cream, opacity: 0.6 }}>{f.monoTag}</span>
            </div>
            <h3 style={{ fontFamily: displayFont, fontWeight: 700, fontStretch: '125%', fontSize: 42, lineHeight: 0.95, margin: '0 0 6px', letterSpacing: '-0.01em' }}>{f.title}</h3>
            <div style={{ fontFamily: monoFont, fontSize: 13, color: BS.cream, marginBottom: 14, opacity: 0.8 }}>{f.sub}</div>
            <p style={{ fontFamily: monoFont, fontSize: 13, lineHeight: 1.65, color: BS.inkDim, margin: 0 }}>{f.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// Pricing
function BSPricing() {
  return (
    <section id="pricing" style={{ padding: '64px 56px' }}>
      <BSSectionTab track="SIDE B · 01" label="Pricing" />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, flexWrap: 'wrap', gap: 16 }}>
        <h2 style={{ fontFamily: displayFont, fontWeight: 800, fontStretch: '125%', fontSize: 64, margin: 0, letterSpacing: '-0.02em' }}>
          Free for the home.<br /><span style={{ color: BS.pink }}>Pro for the room.</span>
        </h2>
        <BSChip>Pricing TBD · waitlist open</BSChip>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
        {[PRICING.free, PRICING.paid].map((tier, idx) => {
          const isPro = idx === 1;
          return (
            <div key={tier.name} style={{
              border: `1px solid ${isPro ? BS.pink : BS.hair}`,
              background: isPro ? 'rgba(255,45,146,0.06)' : 'rgba(245,236,255,0.02)',
              borderRadius: 4, padding: 32, position: 'relative',
            }}>
              {isPro && (
                <div style={{
                  position: 'absolute', top: -12, right: 24,
                  background: BS.pink, color: '#0a0612',
                  fontFamily: monoFont, fontWeight: 700, fontSize: 10, letterSpacing: '0.3em',
                  padding: '4px 10px', borderRadius: 2,
                }}>RECOMMENDED · VENUES</div>
              )}
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 6 }}>
                <span style={{ fontFamily: displayFont, fontWeight: 800, fontStretch: '125%', fontSize: 52, letterSpacing: '-0.02em' }}>{tier.name}</span>
                <span style={{ fontFamily: monoFont, fontSize: 13, color: BS.cream }}>{tier.sub}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 14 }}>
                <span style={{ fontFamily: displayFont, fontWeight: 800, fontSize: 64, color: isPro ? BS.pink : BS.ink, lineHeight: 1 }}>{tier.price}</span>
                {!isPro && <span style={{ fontFamily: monoFont, fontSize: 12, color: BS.inkDim }}>/ forever-ish</span>}
              </div>
              <p style={{ fontFamily: monoFont, fontSize: 13, lineHeight: 1.6, color: BS.inkDim, margin: '0 0 22px' }}>{tier.blurb}</p>

              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 26px', display: 'grid', gap: 9 }}>
                {tier.features.map((f, i) => (
                  <li key={i} style={{
                    fontFamily: monoFont, fontSize: 13,
                    color: f.t ? BS.ink : 'rgba(245,236,255,0.3)',
                    display: 'flex', alignItems: 'center', gap: 10,
                    textDecoration: f.t ? 'none' : 'line-through',
                  }}>
                    <span style={{
                      display: 'inline-block', width: 14, textAlign: 'center',
                      color: f.t ? BS.pink : 'rgba(245,236,255,0.2)',
                    }}>{f.t ? '●' : '○'}</span>
                    {f.label}
                  </li>
                ))}
              </ul>

              <a href={tier.href} style={{
                display: 'inline-block',
                fontFamily: monoFont, fontWeight: 700, fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase',
                color: isPro ? '#0a0612' : BS.ink,
                background: isPro ? BS.pink : 'transparent',
                border: `1px solid ${isPro ? BS.pink : BS.hair}`,
                padding: '14px 24px', textDecoration: 'none', borderRadius: 2,
              }}>{tier.cta} →</a>
            </div>
          );
        })}
      </div>

      <p style={{ fontFamily: monoFont, fontSize: 11, letterSpacing: '0.15em', color: BS.inkDim, textTransform: 'uppercase', marginTop: 28, textAlign: 'center' }}>
        ╱╱  Keep karaoke free. Pro pays for the servers.  ╱╱
      </p>
    </section>
  );
}

// The word "kantahan"
function BSKantahan() {
  return (
    <section id="kantahan" style={{ padding: '80px 56px', borderTop: `1px solid ${BS.hair}`, borderBottom: `1px solid ${BS.hair}`, background: 'rgba(255,45,146,0.04)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 56, alignItems: 'center' }}>
        <div>
          <BSSectionTab track="SIDE B · 02" label="About the name" />
          <div style={{ fontFamily: monoFont, fontSize: 11, letterSpacing: '0.3em', color: BS.cream, opacity: 0.7 }}>FILIPINO · NOUN, VERB</div>
          <div style={{ fontFamily: displayFont, fontWeight: 900, fontStretch: '125%', fontSize: 120, lineHeight: 0.9, letterSpacing: '-0.03em', color: BS.pink, margin: '12px 0' }}>
            kantahán
          </div>
          <div style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', fontSize: 22, color: BS.cream, marginBottom: 8 }}>
            /kan·ta·hán/
          </div>
          <ol style={{ fontFamily: monoFont, fontSize: 14, color: BS.ink, lineHeight: 1.8, paddingLeft: 22 }}>
            <li>a singing session</li>
            <li>a gathering centered on song</li>
            <li>to sing for someone, with someone</li>
          </ol>
        </div>
        <div>
          <p style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', fontSize: 30, lineHeight: 1.35, color: BS.ink, margin: '0 0 24px', textWrap: 'pretty' }}>
            "A Filipino party without karaoke is just a meeting with food."
          </p>
          <p style={{ fontFamily: monoFont, fontSize: 14, lineHeight: 1.8, color: BS.inkDim, margin: '0 0 16px' }}>
            Karaoke isn't a feature in Filipino life — it's furniture. The machine
            sits in the living room next to the rice cooker. Birthdays. Funerals.
            Tuesdays. Someone always sings <em style={{ color: BS.cream, fontStyle: 'italic' }}>My Way</em>. Someone always cries.
          </p>
          <p style={{ fontFamily: monoFont, fontSize: 14, lineHeight: 1.8, color: BS.inkDim, margin: '0 0 24px' }}>
            We named the app after the thing itself — not the machine. Kantahan
            is what happens between the songs: the heckles, the duets nobody asked
            for, the auntie who pretends she can't sing and then sings.
          </p>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <BSChip color={BS.cream}>kantá  ·  song</BSChip>
            <BSChip color={BS.cream}>—han  ·  place / session suffix</BSChip>
          </div>
        </div>
      </div>
    </section>
  );
}

// FAQ
function BSFAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" style={{ padding: '64px 56px' }}>
      <BSSectionTab track="SIDE B · 03" label="Frequently asked" />
      <h2 style={{ fontFamily: displayFont, fontWeight: 800, fontStretch: '125%', fontSize: 64, margin: '0 0 32px', letterSpacing: '-0.02em' }}>
        Liner notes.
      </h2>
      <div style={{ borderTop: `1px solid ${BS.hair}` }}>
        {FAQS.map((item, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{ borderBottom: `1px solid ${BS.hair}` }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                background: 'transparent', border: 'none', padding: '22px 0', cursor: 'pointer',
                fontFamily: displayFont, fontWeight: 700, fontStretch: '125%', fontSize: 28, letterSpacing: '-0.01em',
                color: BS.ink, textAlign: 'left',
              }}>
                <span style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                  <span style={{ fontFamily: monoFont, fontWeight: 500, fontSize: 11, letterSpacing: '0.3em', color: BS.pink, minWidth: 30 }}>{String(i+1).padStart(2,'0')}</span>
                  {item.q}
                </span>
                <span style={{ fontFamily: monoFont, fontSize: 22, color: BS.pink }}>{isOpen ? '−' : '+'}</span>
              </button>
              {isOpen && (
                <div style={{ paddingBottom: 22, paddingLeft: 46 }}>
                  <p style={{ fontFamily: monoFont, fontSize: 14, lineHeight: 1.7, color: BS.inkDim, margin: 0, maxWidth: 720 }}>{item.a}</p>
                </div>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// Footer
function BSFooter() {
  return (
    <footer style={{ padding: '64px 56px 32px', borderTop: `1px solid ${BS.hair}`, position: 'relative', overflow: 'hidden' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 40, marginBottom: 48 }}>
        <div>
          <AnimatedLogo width={260} showMirror={false} />
          <p style={{ fontFamily: monoFont, fontSize: 12, color: BS.inkDim, marginTop: 12, maxWidth: 280, lineHeight: 1.7 }}>
            Free, browser-based karaoke. Built by a homesick Filipino-at-heart.
          </p>
        </div>
        <div>
          <div style={{ fontFamily: monoFont, fontSize: 10, letterSpacing: '0.3em', color: BS.pink, marginBottom: 14 }}>PRODUCT</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8, fontFamily: monoFont, fontSize: 12 }}>
            <li><a href={SITE.display} style={{ color: BS.ink, textDecoration: 'none' }}>Display</a></li>
            <li><a href={SITE.request} style={{ color: BS.ink, textDecoration: 'none' }}>Request</a></li>
            <li><a href={SITE.dj} style={{ color: BS.ink, textDecoration: 'none' }}>DJ console</a></li>
            <li><a href="#pricing" style={{ color: BS.ink, textDecoration: 'none' }}>Pricing</a></li>
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: monoFont, fontSize: 10, letterSpacing: '0.3em', color: BS.pink, marginBottom: 14 }}>CONNECT</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8, fontFamily: monoFont, fontSize: 12 }}>
            <li><a href={SITE.mailto} style={{ color: BS.ink, textDecoration: 'none' }}>{SITE.email}</a></li>
            <li><a href="#" style={{ color: BS.ink, textDecoration: 'none' }}>github</a></li>
            <li><a href="#" style={{ color: BS.ink, textDecoration: 'none' }}>instagram</a></li>
            <li><a href="#" style={{ color: BS.ink, textDecoration: 'none' }}>x / twitter</a></li>
          </ul>
        </div>
        <div>
          <div style={{ fontFamily: monoFont, fontSize: 10, letterSpacing: '0.3em', color: BS.pink, marginBottom: 14 }}>NEWSLETTER</div>
          <p style={{ fontFamily: monoFont, fontSize: 11, color: BS.inkDim, margin: '0 0 12px', lineHeight: 1.6 }}>Get notified when Pro lands.</p>
          <div style={{ display: 'flex', border: `1px solid ${BS.hair}` }}>
            <input placeholder="email@…" style={{
              flex: 1, background: 'transparent', border: 'none', padding: '10px 12px',
              fontFamily: monoFont, fontSize: 12, color: BS.ink, outline: 'none',
            }} />
            <button style={{
              background: BS.pink, color: '#0a0612', border: 'none',
              fontFamily: monoFont, fontWeight: 700, fontSize: 11, letterSpacing: '0.2em', padding: '0 14px', cursor: 'pointer',
            }}>OK</button>
          </div>
        </div>
      </div>

      {/* Giant outlined wordmark */}
      <div style={{
        fontFamily: displayFont, fontWeight: 900, fontStretch: '125%', fontSize: 260, lineHeight: 0.9,
        letterSpacing: '-0.04em',
        color: 'transparent',
        WebkitTextStroke: `1px ${BS.hair}`,
        textAlign: 'center', margin: '0 0 12px', userSelect: 'none',
      }}>kantahan</div>

      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontFamily: monoFont, fontSize: 10, letterSpacing: '0.25em', color: BS.inkDim, textTransform: 'uppercase',
        borderTop: `1px solid ${BS.hair}`, paddingTop: 18,
      }}>
        <span>© 2026 kantahan.app · A B-SIDE · TRACK 01</span>
        <span>Mabuhay ang kantahan ★</span>
      </div>
    </footer>
  );
}

// MAIN
function VariantBSide() {
  return (
    <div style={{ background: BS.bg, color: BS.ink, minHeight: '100%' }}>
      <BSNav />
      <BSHero />
      <BSMarquee />
      <BSHow />
      <BSMarquee text="★ FREE FOREVER FOR HOME ★ PRO FOR THE ROOM ★ NO INSTALLS ★ JUST A URL ★ " />
      <BSFeatures />
      <BSPricing />
      <BSKantahan />
      <BSFAQ />
      <BSFooter />
    </div>
  );
}

window.VariantBSide = VariantBSide;