// Variant A — Editorial brutalist (v2)
// Updates per feedback:
//  • Hero replaces the editorial pull-quote with the InStock Trade
//    logomark + wordmark.
//  • Discord CTA split into Discord + WhatsApp (two equal blocks).
//  • Nav trimmed to: Stock · Formularz · FAQ · Kontakt · PL/EN.
//  • B2B login & "Jak to działa" / "O nas" links removed from nav,
//    sections still live in-page.

// External contact URLs. Single source of truth — update here and the
// hero CTAs + footer links all change at once.
const DISCORD_URL = 'https://discord.gg/Tzn5P9WWeB';
const WHATSAPP_URL = 'https://chat.whatsapp.com/KABBIoPz5E4JuhxA28H6V7';

// ─────────────────────────────────────────────────────────────────────
// WTB form endpoint — Cloudflare Worker that forwards to Discord.
// Empty string = "no backend yet, just show success on submit"
// (useful for design preview). Once the Worker is deployed, paste its
// URL here (e.g. 'https://instock-wtb.<account>.workers.dev').
// See cloudflare/README.md for the 5-minute setup.
// ─────────────────────────────────────────────────────────────────────
const WTB_ENDPOINT = 'https://instock-wtb.ignacyhondo1.workers.dev/';

// — Logomark —
// Brutalist 1:1 stamp. Black square, white "IS" Archivo Black mark on
// top half, divider, "TRADE→" wordline on bottom. Designed in SVG so
// it scales cleanly.
function ISTLogo({ size = 96, bg = '#16110d', fg = '#f1ede4' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" aria-label="InStock Trade">
      <rect x="0" y="0" width="100" height="100" fill={bg} />
      {/* IS letters — chunky, slightly cropped on right edge */}
      <text x="50" y="58" textAnchor="middle"
            fontFamily="'Archivo Black', sans-serif" fontSize="58"
            fill={fg} letterSpacing="-2">IS</text>
      {/* divider */}
      <rect x="10" y="68" width="80" height="2" fill={fg} />
      {/* TRADE + arrow */}
      <text x="10" y="86" fontFamily="'JetBrains Mono', monospace"
            fontSize="11" fill={fg} letterSpacing="2">TRADE</text>
      <text x="90" y="86" textAnchor="end"
            fontFamily="'JetBrains Mono', monospace"
            fontSize="13" fill={fg}>→</text>
    </svg>
  );
}

// — Flame —
// Brutalist hot-deals mark sitting next to "Popularne oferty". Two
// stacked teardrop shapes (outer = accent red-orange, inner = bright
// yellow core). The flicker animation jiggles + rescales the inner
// core to suggest a real flame without resorting to an emoji.
function HotFlame({ size = 28, color = '#ff4413', core = '#ffd166', ink = '#16110d' }) {
  return (
    <svg width={size} height={size * 1.15} viewBox="0 0 32 36" aria-hidden="true"
         style={{ display: 'block', filter: 'drop-shadow(0 1px 0 ' + ink + ')' }}>
      <g className="hf-outer" style={{ transformOrigin: '16px 28px' }}>
        {/* Outer flame body — chunky teardrop with a notch + tail */}
        <path d="M16 2 C 11 9 4 13 4 21 C 4 29 10 34 16 34 C 22 34 28 29 28 21 C 28 16 24 14 22 10 C 21 14 19 14 18 12 C 17 9 17 5 16 2 Z"
              fill={color} stroke={ink} strokeWidth="1.5" strokeLinejoin="miter" />
      </g>
      <g className="hf-core" style={{ transformOrigin: '16px 28px' }}>
        {/* Inner brighter core */}
        <path d="M16 13 C 13 17 11 20 11 24 C 11 28 13 31 16 31 C 19 31 21 28 21 24 C 21 21 19 19 18 17 C 17 18 17 16 16 13 Z"
              fill={core} />
      </g>
      <style>{`
        @keyframes hfFlickerOuter { 0%,100%{transform:scaleY(1) scaleX(1)} 35%{transform:scaleY(1.04) scaleX(.98)} 70%{transform:scaleY(.97) scaleX(1.02)} }
        @keyframes hfFlickerCore  { 0%,100%{transform:scaleY(1) translateY(0); opacity:1} 30%{transform:scaleY(.9) translateY(2px); opacity:.85} 65%{transform:scaleY(1.08) translateY(-1px); opacity:1} }
        .hf-outer { animation: hfFlickerOuter 1.4s ease-in-out infinite; }
        .hf-core  { animation: hfFlickerCore  0.9s ease-in-out infinite; }
      `}</style>
    </svg>
  );
}

function VariantA() {
  const [lang, setLang] = React.useState('pl');
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState('');
  const [picker, setPicker] = React.useState(null);  // sneaker card → channel picker
  const { items, ready } = useStock();
  const broken = useBrokenImages();
  // Featured = first 8 IN-STOCK items with a working image. OOS rows
  // never reach the homepage — clients see only what they can order.
  // Cards roll over to the next eligible product if a Drive thumbnail
  // 404s mid-session.
  const featured = items
    .filter(s => s.availability !== 'oos')
    .filter(s => !broken.has(s.code))
    .slice(0, 8);
  const t = I18N[lang];

  const a = {
    bg: '#f1ede4',
    ink: '#16110d',
    line: '#16110d',
    accent: '#ff4413',
    whatsapp: '#1ea362',   // muted brand-adjacent green
    mute: '#7d736a',
  };

  const wrap = {
    width: '100%', minHeight: '100%',
    background: a.bg, color: a.ink,
    fontFamily: "'Archivo', system-ui, sans-serif",
    fontFeatureSettings: '"ss01"',
    display: 'flex', flexDirection: 'column',
  };
  const rule = `2px solid ${a.line}`;

  return (
    <div style={wrap}>
      {/* — Topbar — */}
      <div className="va-topbar" style={{ display: 'flex', alignItems: 'stretch', borderBottom: rule, fontSize: 12, textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>
        <a className="va-topbar-brand" href="#top" style={{ padding: '14px 18px', borderRight: rule, fontFamily: "'Archivo Black', sans-serif", letterSpacing: '.04em', fontSize: 14, color: a.ink, textDecoration: 'none', display: 'flex', alignItems: 'center', gap: 10 }}>
          <ISTLogo size={26} bg={a.ink} fg={a.bg} />
          INSTOCK · TRADE™
        </a>
        <div className="va-topbar-tagline" style={{ padding: '14px 22px', borderRight: rule, color: a.mute, fontFamily: "'JetBrains Mono', monospace", textTransform: 'none', letterSpacing: 0, display: 'flex', alignItems: 'center' }}>
          B2B Sneakers · PL
        </div>
        <div className="va-topbar-spacer" style={{ flex: 1 }} />
        {[
          { href: 'stock.html', label: t.nav_stock },
          { href: '#wtb',      label: t.nav_wtb },
          { href: '#faq',      label: t.nav_faq },
          { href: '#contact',  label: t.nav_contact },
        ].map((n) => (
          <a className="va-topbar-link" key={n.href} href={n.href} style={{ padding: '14px 16px', borderLeft: rule, color: a.ink, textDecoration: 'none', display: 'flex', alignItems: 'center' }}>{n.label}</a>
        ))}
        <button className="va-topbar-lang" onClick={() => setLang(lang === 'pl' ? 'en' : 'pl')}
          style={{ padding: '14px 18px', borderLeft: rule, background: a.ink, color: a.bg, font: 'inherit', cursor: 'pointer', fontWeight: 700, letterSpacing: '.08em', textTransform: 'uppercase' }}>
          {lang === 'pl' ? 'EN' : 'PL'}
        </button>
      </div>

      {/* — Hero — */}
      <div id="top" style={{ borderBottom: rule, position: 'relative' }}>
        <div className="va-eyebrow" style={{ padding: '18px 24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: a.mute, textTransform: 'uppercase', letterSpacing: '.16em' }}>
          <span>2026</span>
          <span style={{ height: 1, background: a.line, flex: 1, margin: '0 16px', opacity: .25 }}></span>
          <span>{new Date().toLocaleDateString(lang === 'pl' ? 'pl-PL' : 'en-GB')}</span>
        </div>

        {/* Logo + wordmark composition */}
        <div className="va-hero-comp" style={{
          padding: '22px 24px 30px',
          display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 28,
          alignItems: 'center',
        }}>
          <div className="va-hero-logo" style={{ flex: '0 0 auto' }}>
            <ISTLogo size={210} bg={a.ink} fg={a.bg} />
          </div>
          <div style={{ minWidth: 0 }}>
            <h1 className="va-hero-h1" style={{
              fontFamily: "'Archivo Black', sans-serif",
              fontSize: 168,
              lineHeight: 0.84,
              letterSpacing: '-0.045em',
              margin: 0,
              textTransform: 'uppercase',
            }}>
              InStock<br />
              <span style={{ fontFamily: "'Fraunces', serif", fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.03em' }}>
                Trade<span className="va-hero-h1-tm" style={{ fontFamily: "'Archivo Black', sans-serif", fontStyle: 'normal', fontWeight: 900, fontSize: 60, verticalAlign: 'super', lineHeight: 1 }}>™</span>
              </span>
            </h1>
          </div>
        </div>

        {/* Subtitle + dual CTAs */}
        <div className="va-hero-bottom" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', borderTop: rule }}>
          <div className="va-hero-sub" style={{ padding: '22px 24px', borderRight: rule, fontSize: 18, lineHeight: 1.45 }}>
            {t.hero_sub}
          </div>
          <a className="va-cta-discord" href={DISCORD_URL} target="_blank" rel="noopener noreferrer" style={{
            padding: '22px', borderRight: rule, background: '#5865F2', color: '#fff',
            textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            fontWeight: 800, fontSize: 22, textTransform: 'uppercase', letterSpacing: '-.01em',
          }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
              <DiscordGlyph />
              Discord
            </span>
            <span style={{ fontSize: 28 }}>→</span>
          </a>
          <a className="va-cta-whatsapp" href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" style={{
            padding: '22px', background: a.whatsapp, color: '#fff',
            textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            fontWeight: 800, fontSize: 22, textTransform: 'uppercase', letterSpacing: '-.01em',
          }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
              <WhatsappGlyph />
              WhatsApp
            </span>
            <span style={{ fontSize: 28 }}>→</span>
          </a>
        </div>
      </div>

      {/* — Stock board — */}
      <div id="stock" style={{ borderBottom: rule }}>
        <div className="va-stockhead" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 24px', borderBottom: rule }}>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <HotFlame size={30} color={a.accent} ink={a.ink} />
            <h2 style={{ fontFamily: "'Archivo Black', sans-serif", fontSize: 28, margin: 0, textTransform: 'uppercase', letterSpacing: '-0.02em' }}>{t.section_stock}</h2>
            <span className="va-stockhead-meta" style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: a.mute }}>
              {lang === 'pl' ? 'aktualizowane codziennie' : 'updated daily'}
            </span>
          </div>
          <a className="va-stocklink va-stocklink-cta" href="stock.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            color: a.bg, background: a.ink,
            padding: '12px 20px',
            fontFamily: "'Archivo Black', sans-serif",
            fontSize: 16, fontWeight: 700,
            letterSpacing: '.02em', textTransform: 'uppercase',
            textDecoration: 'none',
            border: `2px solid ${a.ink}`,
            position: 'relative',
            transition: 'transform .15s ease, background .15s ease',
          }}>
            <span>{t.cta_stock}</span>
            <span className="va-stocklink-arrow" aria-hidden="true">→</span>
          </a>
        </div>

        <div className="va-stockgrid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)' }}>
          {!ready ? (
            // First visit — sheet is loading, render skeletons so the
            // user never sees the embedded fallback flash through.
            Array.from({ length: 8 }, (_, i) => (
              <div key={i} style={{
                borderRight: (i % 4 === 3) ? 'none' : rule,
                borderBottom: (i < 4) ? rule : 'none',
              }}>
                <SkeletonCard rule={rule} bg={a.bg} />
              </div>
            ))
          ) : featured.map((s, i) => {
            const isOut = s.availability === 'oos';
            const statusLabel = isOut ? t.stock_oos : t.stock_available;
            const statusColor = isOut ? a.mute : a.ink;
            return (
              <button key={s.code || i} onClick={() => setPicker(s)} style={{
                all: 'unset', display: 'block', cursor: 'pointer',
                borderRight: (i % 4 === 3) ? 'none' : rule,
                borderBottom: (i < 4) ? rule : 'none',
                padding: 0,
                position: 'relative',
                background: a.bg,
              }}>
                <div style={{ aspectRatio: '4 / 3', borderBottom: rule, position: 'relative' }}>
                  <PatternedSneakerSlot item={s} />
                  {isOut && (
                    <div style={{
                      position: 'absolute', inset: 0,
                      background: 'rgba(241,237,228,.55)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      pointerEvents: 'none',
                    }}>
                      <span style={{
                        background: a.ink, color: a.bg, padding: '6px 14px',
                        fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                        letterSpacing: '.14em', textTransform: 'uppercase', fontWeight: 700,
                      }}>{t.stock_oos}</span>
                    </div>
                  )}
                </div>
                <div style={{ padding: '14px 14px 16px', display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <div style={{ fontWeight: 700, fontSize: 17, lineHeight: 1.2 }}>{s.model}</div>
                  {s.code && (
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: a.mute, letterSpacing: '.08em' }}>
                      SKU · {s.code}
                    </div>
                  )}
                  <div style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                    textTransform: 'uppercase', letterSpacing: '.1em', fontWeight: 700,
                    color: statusColor, marginTop: 2,
                  }}>
                    <span style={{ width: 7, height: 7, background: statusColor, borderRadius: '50%' }}></span>
                    {statusLabel}
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {/* — Process strip — */}
      <div className="va-process" style={{ display: 'grid', gridTemplateColumns: '220px 1fr 1fr 1fr', borderBottom: rule }}>
        <div className="va-process-head" style={{ padding: '24px', borderRight: rule, background: a.ink, color: a.bg }}>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: '.1em', textTransform: 'uppercase', opacity: .6, marginBottom: 8 }}>—— 02</div>
          <div className="va-process-title" style={{ fontFamily: "'Archivo Black', sans-serif", fontSize: 30, lineHeight: .9, textTransform: 'uppercase' }}>{t.section_how}</div>
        </div>
        {PROCESS.map((p, i) => (
          <div className="va-process-step" key={p.n} style={{ padding: '22px', borderRight: i < 2 ? rule : 'none' }}>
            <div className="va-process-num" style={{ fontFamily: "'Archivo Black', sans-serif", fontSize: 56, lineHeight: 1, marginBottom: 8, color: a.accent }}>{p.n}</div>
            <div style={{ fontWeight: 700, fontSize: 17, marginBottom: 6 }}>{lang === 'pl' ? p.t_pl : p.t_en}</div>
            <div style={{ fontSize: 14, lineHeight: 1.45, color: a.mute }}>{lang === 'pl' ? p.d_pl : p.d_en}</div>
          </div>
        ))}
      </div>

      {/* — WTB form + About/FAQ — */}
      <div className="va-main" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', borderBottom: rule, flex: '1 0 auto' }}>
        <div id="wtb" style={{ borderRight: rule, padding: '26px 24px' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 14 }}>
            <h3 className="va-form-title" style={{ fontFamily: "'Archivo Black', sans-serif", fontSize: 32, margin: 0, textTransform: 'uppercase' }}>{t.form_title}</h3>
            <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: a.mute }}>— 03</span>
          </div>
          <p style={{ margin: '0 0 18px', maxWidth: 560, lineHeight: 1.5 }}>{t.form_sub}</p>
          {!sent ? (
            <form
              onSubmit={async (e) => {
                e.preventDefault();
                if (sending) return;
                setSendError('');
                const fd = new FormData(e.currentTarget);
                const payload = {
                  shop:  fd.get('shop')  || '',
                  vat:   fd.get('vat')   || '',
                  email: fd.get('email') || '',
                  list:  fd.get('list')  || '',
                  hp:    fd.get('hp')    || '',
                  lang,
                };
                // No backend wired yet — preview mode: just show success.
                if (!WTB_ENDPOINT) { setSent(true); return; }
                setSending(true);
                try {
                  const ctrl = new AbortController();
                  const timeout = setTimeout(() => ctrl.abort(), 12000);
                  const res = await fetch(WTB_ENDPOINT, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload),
                    signal: ctrl.signal,
                  });
                  clearTimeout(timeout);
                  const data = await res.json().catch(() => ({}));
                  if (res.ok && data.ok) {
                    setSent(true);
                  } else {
                    const errKey = data.error || 'send_failed';
                    setSendError(lang === 'pl'
                      ? (errKey === 'rate_limited'
                          ? 'Za dużo zgłoszeń — spróbuj ponownie za kilka minut.'
                          : 'Coś poszło nie tak. Spróbuj ponownie lub napisz na Discord/WhatsApp.')
                      : (errKey === 'rate_limited'
                          ? 'Too many submissions — try again in a few minutes.'
                          : 'Something went wrong. Try again or message us on Discord/WhatsApp.'));
                  }
                } catch (e) {
                  setSendError(lang === 'pl'
                    ? 'Brak połączenia. Sprawdź internet i spróbuj ponownie.'
                    : 'Network error. Check your connection and try again.');
                } finally {
                  setSending(false);
                }
              }}
              style={{ display: 'grid', gap: 0 }}
            >
              {/* Honeypot — hidden from users, bots fill it → request is dropped. */}
              <input type="text" name="hp" tabIndex={-1} autoComplete="off" aria-hidden="true"
                     style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
              <div className="va-form-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', border: rule, borderBottom: 'none' }}>
                <label style={{ borderRight: rule, padding: '10px 14px', display: 'flex', flexDirection: 'column' }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: a.mute, textTransform: 'uppercase', letterSpacing: '.1em' }}>{t.form_shop}</span>
                  <input name="shop" required placeholder="Sklep Sneaker Sp. z o.o." style={inputA} />
                </label>
                <label style={{ padding: '10px 14px', display: 'flex', flexDirection: 'column' }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: a.mute, textTransform: 'uppercase', letterSpacing: '.1em' }}>{t.form_vat}</span>
                  <input name="vat" required placeholder="PL1234567890" style={inputA} />
                </label>
              </div>
              <label style={{ borderLeft: rule, borderRight: rule, padding: '10px 14px', display: 'flex', flexDirection: 'column' }}>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: a.mute, textTransform: 'uppercase', letterSpacing: '.1em' }}>{t.form_email}</span>
                <input name="email" required type="email" placeholder="buyer@sklep.pl" style={inputA} />
              </label>
              <label style={{ border: rule, padding: '10px 14px', display: 'flex', flexDirection: 'column' }}>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: a.mute, textTransform: 'uppercase', letterSpacing: '.1em' }}>{t.form_list}</span>
                <textarea name="list" required rows={6} placeholder={t.form_list_ph} style={{ ...inputA, fontFamily: "'JetBrains Mono', monospace", fontSize: 13, resize: 'none' }}></textarea>
              </label>
              {sendError && (
                <div style={{
                  marginTop: 10, padding: '10px 14px', border: rule, borderColor: '#b03a2e',
                  background: '#fdecea', color: '#7a2118', fontSize: 13,
                  fontFamily: "'JetBrains Mono', monospace",
                }}>
                  {sendError}
                </div>
              )}
              <button type="submit" disabled={sending} style={{
                marginTop: 14, padding: '18px 22px', border: 'none',
                background: sending ? a.mute : a.ink, color: a.bg, fontFamily: "'Archivo Black', sans-serif",
                fontSize: 20, textTransform: 'uppercase', letterSpacing: '.02em',
                cursor: sending ? 'wait' : 'pointer',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                transition: 'background .15s',
              }}>
                {sending ? (lang === 'pl' ? 'WYSYŁANIE…' : 'SENDING…') : t.form_send} <span>→</span>
              </button>
            </form>
          ) : (
            <div style={{ border: rule, padding: 22, background: a.accent, color: a.bg }}>
              <div style={{ fontFamily: "'Archivo Black', sans-serif", fontSize: 28, textTransform: 'uppercase' }}>✓ {t.sent_title}</div>
              <div style={{ marginTop: 6, fontSize: 16 }}>{t.sent_sub}</div>
              <button onClick={() => setSent(false)} style={{ marginTop: 14, border: `2px solid ${a.bg}`, background: 'transparent', color: a.bg, padding: '8px 14px', fontWeight: 700, cursor: 'pointer' }}>↺</button>
            </div>
          )}
        </div>

        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div style={{ padding: '24px', borderBottom: rule }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 12 }}>
              <h3 style={{ fontFamily: "'Archivo Black', sans-serif", fontSize: 28, margin: 0, textTransform: 'uppercase' }}>{t.section_about}</h3>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: a.mute }}>— 04</span>
            </div>
            <p style={{ margin: '0 0 10px', lineHeight: 1.55, fontSize: 15 }}>{t.about_p1}</p>
            <p style={{ margin: 0, lineHeight: 1.55, fontSize: 15 }}>{t.about_p2}</p>
          </div>
          <div id="faq" style={{ padding: '24px', flex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 12 }}>
              <h3 style={{ fontFamily: "'Archivo Black', sans-serif", fontSize: 28, margin: 0, textTransform: 'uppercase' }}>{t.section_faq}</h3>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: a.mute }}>— 05</span>
            </div>
            {FAQ.slice(0, 3).map((f, i) => (
              <details key={i} style={{ borderTop: rule, padding: '10px 0' }}>
                <summary style={{ cursor: 'pointer', fontWeight: 700, fontSize: 15, listStyle: 'none', display: 'flex', justifyContent: 'space-between' }}>
                  {lang === 'pl' ? f.q_pl : f.q_en} <span>+</span>
                </summary>
                <p style={{ margin: '8px 0 4px', lineHeight: 1.5, fontSize: 14, color: a.mute }}>{lang === 'pl' ? f.a_pl : f.a_en}</p>
              </details>
            ))}
          </div>
        </div>
      </div>

      {/* — Footer / Contact — */}
      <div className="va-footer" id="contact" style={{ background: a.ink, color: a.bg, padding: '28px 24px', display: 'grid', gridTemplateColumns: 'auto 1fr 1fr 1fr', gap: 24, alignItems: 'start' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <ISTLogo size={120} bg={a.bg} fg={a.ink} />
          <div style={{ fontFamily: "'Archivo Black', sans-serif", fontSize: 28, lineHeight: .9, letterSpacing: '-.02em', textTransform: 'uppercase' }}>InStock<br/>Trade™</div>
        </div>
        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: .5, textTransform: 'uppercase', letterSpacing: '.12em', marginBottom: 8 }}>{lang === 'pl' ? 'Kontakt' : 'Contact'}</div>
          <div style={{ fontSize: 14, lineHeight: 1.7 }}>
            <a href={DISCORD_URL} target="_blank" rel="noopener noreferrer" style={{ color: a.bg, textDecoration: 'underline', textUnderlineOffset: 3 }}>Discord</a><br/>
            <a href={WHATSAPP_URL} target="_blank" rel="noopener noreferrer" style={{ color: a.bg, textDecoration: 'underline', textUnderlineOffset: 3 }}>WhatsApp — grupa</a><br/>
            <a href="mailto:kontakt@instocktrade.pl" style={{ color: a.bg, textDecoration: 'underline', textUnderlineOffset: 3 }}>kontakt@instocktrade.pl</a>
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: .5, textTransform: 'uppercase', letterSpacing: '.12em', marginBottom: 8 }}>{lang === 'pl' ? 'Adres' : 'Address'}</div>
          <div style={{ fontSize: 14, lineHeight: 1.7 }}>
            ul. Józefa Chełmońskiego 6/47<br/>
            75-900 Koszalin<br/>
            NIP PL: xxxxxxxxxx
          </div>
        </div>
        <div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: .5, textTransform: 'uppercase', letterSpacing: '.12em', marginBottom: 8 }}>{lang === 'pl' ? 'Godziny' : 'Hours'}</div>
          <div style={{ fontSize: 14, lineHeight: 1.7 }}>
            {lang === 'pl' ? 'Kontakt' : 'Contact'} · 24/7<br/>
            © 2026 · {t.foot_rights}
          </div>
        </div>
      </div>

      <style>{`@keyframes pulseA { 0%,100%{opacity:1} 50%{opacity:.35} }`}</style>

      {/* Channel picker — same component the stock subpage uses */}
      {picker && (
        <ChannelPicker
          item={picker}
          lang={lang}
          onClose={() => setPicker(null)}
          colors={{ bg: a.bg, ink: a.ink, mute: a.mute, accent: a.accent, whatsapp: a.whatsapp }}
        />
      )}
    </div>
  );
}

// Channel glyphs — the recognised WhatsApp + Discord marks used on
// contact CTAs across the web. Drawn in SVG so they render crisply at
// every size and don't pull in external image files.
function DiscordGlyph() {
  return (
    <svg width="26" height="26" viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <circle cx="16" cy="16" r="15" fill="#fff" />
      {/* Stylised pill-shaped wordmark frame with eyes — reads as Discord */}
      <path d="M21.5 11.3c-1.1-.5-2.3-.9-3.5-1.1l-.2.3c1.1.3 2.2.7 3.1 1.3-1.2-.6-2.6-1-4-1.1-.5 0-.9-.1-1.4 0-.5 0-.9.1-1.4.1-.5.1-.9.2-1.4.3-.5.1-.9.3-1.3.5-.2.1-.4.2-.6.3l-.1.1c.9-.6 2-1 3-1.3l-.2-.3c-1.2.2-2.4.6-3.5 1.1-1.5 2.8-2.3 5.9-2.7 9.1.9 1 2.1 1.7 3.4 2.1.3-.4.6-.8.8-1.2-.5-.2-.9-.4-1.3-.7.1-.1.2-.1.3-.2.5.3 1.1.5 1.6.7s1.1.3 1.7.4c1 .1 2 .1 3 0 .6-.1 1.2-.2 1.7-.4s1.1-.4 1.6-.7c.1.1.2.1.3.2-.4.3-.9.5-1.3.7.2.4.5.8.8 1.2 1.3-.4 2.5-1.1 3.4-2.1-.4-3.2-1.2-6.3-2.7-9.1zM12.8 18.6c-.8 0-1.5-.8-1.5-1.7s.7-1.7 1.5-1.7c.8 0 1.5.8 1.5 1.7s-.7 1.7-1.5 1.7zm6.4 0c-.8 0-1.5-.8-1.5-1.7s.7-1.7 1.5-1.7c.8 0 1.5.8 1.5 1.7s-.7 1.7-1.5 1.7z" fill="#5865F2"/>
    </svg>
  );
}
function WhatsappGlyph() {
  return (
    <svg width="26" height="26" viewBox="0 0 32 32" fill="none" aria-hidden="true">
      <circle cx="16" cy="16" r="15" fill="#25D366" />
      {/* White phone handset, classic curved receiver shape */}
      <path d="M21.8 18.9c-.4-.2-2.3-1.1-2.6-1.3-.4-.1-.6-.2-.9.2-.3.4-1 1.3-1.2 1.5-.2.3-.4.3-.8.1-.4-.2-1.6-.6-3-1.8-1.1-1-1.9-2.2-2.1-2.6-.2-.4 0-.6.2-.8.2-.2.4-.4.6-.7.2-.2.3-.4.4-.7.1-.3 0-.5 0-.7-.1-.2-.9-2.1-1.2-2.9-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.7.1-1 .4-.3.4-1.3 1.3-1.3 3.1 0 1.8 1.3 3.6 1.5 3.9.2.3 2.6 4 6.4 5.6.9.4 1.6.6 2.2.8 1 .3 1.8.3 2.5.2.8-.1 2.3-.9 2.6-1.8.3-.9.3-1.7.2-1.8-.1-.2-.4-.3-.8-.5z" fill="#fff" />
    </svg>
  );
}

const inputA = {
  border: 'none', background: 'transparent', padding: '4px 0',
  font: 'inherit', fontSize: 16, fontWeight: 500, outline: 'none', width: '100%',
};

window.VariantA = VariantA;
window.ISTLogo = ISTLogo;
window.HotFlame = HotFlame;
window.DiscordGlyph = DiscordGlyph;
window.WhatsappGlyph = WhatsappGlyph;
window.DISCORD_URL = DISCORD_URL;
window.WHATSAPP_URL = WHATSAPP_URL;