// ─────────────────────────────────────────────
// BushcraftDen — Variation A (cinematic, atmospheric)
// Exports: VariationA, SharedFooter, SharedNav, SharedStickyNav
// ─────────────────────────────────────────────

const NAV_LINKS = [
  { l: 'Knives',    h: '/category/knives/' },
  { l: 'Axes',      h: '/category/axes-hatchets/' },
  { l: 'Fire',      h: '/category/fire-starting/' },
  { l: 'Saws',      h: '/category/saws/' },
  { l: 'All Gear',  h: '/gear/' },
  { l: 'About',     h: '/about/' },
];

// ───── Shared nav — absolute position (used on homepage hero) ─────
const NavA = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <nav className="site-nav" style={{
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 20,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M12 2 L4 14 L9 14 L5 22 L19 22 L15 14 L20 14 Z" fill="#e8c46e"/>
          </svg>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--bone)', letterSpacing: '-0.01em' }}>
            Bushcraft<span style={{ color: 'var(--gold)' }}>Den</span>
          </span>
        </a>

        <div className="nav-desktop" style={{ fontSize: 13, color: 'var(--sage)' }}>
          {NAV_LINKS.map(n => (
            <a key={n.l} href={n.h} style={{ transition: 'color .2s' }}
               onMouseEnter={e => e.currentTarget.style.color = 'var(--gold)'}
               onMouseLeave={e => e.currentTarget.style.color = ''}>{n.l}</a>
          ))}
          <a href="/tools/find-land/" style={{
            background: 'rgba(232,196,110,.12)', border: '1px solid rgba(232,196,110,.35)',
            borderRadius: 999, padding: '5px 14px', color: 'var(--gold)',
            fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em',
            textTransform: 'uppercase', transition: 'all .2s',
          }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(232,196,110,.22)'}
            onMouseLeave={e => e.currentTarget.style.background = 'rgba(232,196,110,.12)'}
          >📍 Find Land</a>
        </div>

        <button className="nav-hamburger" aria-label={open ? 'Close menu' : 'Open menu'}
          onClick={() => setOpen(o => !o)}>
          {open
            ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M6 6 L18 18 M18 6 L6 18"/></svg>
            : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 7h18 M3 12h18 M3 17h18"/></svg>
          }
        </button>
      </nav>

      {open && (
        <div className="nav-drawer" onClick={() => setOpen(false)}>
          {[...NAV_LINKS, { l: '📍 Find Land', h: '/tools/find-land/' }].map(n => (
            <a key={n.l} href={n.h}>{n.l}</a>
          ))}
        </div>
      )}
    </>
  );
};

// ───── Sticky nav — for article/review pages ─────
const StickyNav = () => {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <nav className="site-nav" style={{
        position: 'sticky', top: 0, zIndex: 50,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        background: 'rgba(7,15,10,0.88)', backdropFilter: 'blur(12px)',
      }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
            <path d="M12 2 L4 14 L9 14 L5 22 L19 22 L15 14 L20 14 Z" fill="#e8c46e"/>
          </svg>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--bone)' }}>
            Bushcraft<span style={{ color: 'var(--gold)' }}>Den</span>
          </span>
        </a>

        <div className="nav-desktop" style={{ fontSize: 13, color: 'var(--sage)' }}>
          {NAV_LINKS.map(n => (
            <a key={n.l} href={n.h} style={{ transition: 'color .2s' }}
               onMouseEnter={e => e.currentTarget.style.color = 'var(--gold)'}
               onMouseLeave={e => e.currentTarget.style.color = ''}>{n.l}</a>
          ))}
          <a href="/tools/find-land/" style={{
            background: 'rgba(232,196,110,.12)', border: '1px solid rgba(232,196,110,.35)',
            borderRadius: 999, padding: '4px 12px', color: 'var(--gold)',
            fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em',
            textTransform: 'uppercase', whiteSpace: 'nowrap',
          }}>📍 Find Land</a>
        </div>

        <button className="nav-hamburger" aria-label={open ? 'Close menu' : 'Open menu'}
          onClick={() => setOpen(o => !o)}>
          {open
            ? <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M6 6 L18 18 M18 6 L6 18"/></svg>
            : <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 7h18 M3 12h18 M3 17h18"/></svg>
          }
        </button>
      </nav>

      {open && (
        <div className="nav-drawer" onClick={() => setOpen(false)}>
          {[...NAV_LINKS, { l: '📍 Find Land', h: '/tools/find-land/' }].map(n => (
            <a key={n.l} href={n.h}>{n.l}</a>
          ))}
        </div>
      )}
    </>
  );
};

const HeroA = () => (
  <ForestScene height={780}>
    <NavA/>
    <div className="hero-content" style={{
      position: 'absolute',
      bottom: '14%', left: 0, right: 0,
    }}>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <div className="eyebrow" style={{ marginBottom: 20 }}>
          ◦ Practical gear knowledge
        </div>
        <h1 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(36px, 9vw, 92px)',
          fontWeight: 500,
          fontStyle: 'normal',
          letterSpacing: '-0.02em',
          lineHeight: 1.02,
          fontVariationSettings: '"SOFT" 0, "WONK" 0, "opsz" 144',
          margin: '0 0 28px',
          color: 'var(--bone)',
          maxWidth: 900,
        }}>
          The outdoor gear library<br/>
          <span style={{ color: 'var(--gold)', fontWeight: 500 }}>you'll actually use.</span>
        </h1>
        <p className="lede" style={{ fontSize: 22, maxWidth: 640, margin: '0 0 36px' }}>
          Buying guides, product reviews, and practical advice for bushcraft knives, axes, fire starters, and wilderness tools. No hype. No false urgency. Just useful information for people who spend time outdoors.
        </p>
        <div className="hero-actions">
          <a href="/posts/bushcraft-skills/" className="btn btn-primary">
            Start with the basics
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M1 7h11M8 3l4 4-4 4" stroke="#1a0e08" strokeWidth="1.5" fill="none"/></svg>
          </a>
          <a href="/reviews/" className="btn btn-ghost">Just browse →</a>
        </div>
      </div>
    </div>
  </ForestScene>
);

// ───── Categories ─────
const CATS = [
  { name: 'Knives',          href: '/category/knives/',        desc: 'Fixed-blade bushcraft knives, survival knives, and reviews for every budget and skill level.', icon: 'M5 19 L19 5 M14 5 L19 5 L19 10' },
  { name: 'Axes & Hatchets', href: '/category/axes-hatchets/', desc: 'Camp axes and hatchets for wood processing, shelter building, and wilderness work.', icon: 'M4 12 L12 4 L20 12 L12 20 Z' },
  { name: 'Fire Starting',   href: '/category/fire-starting/', desc: 'Ferro rods, fire strikers, and fire-starting kits — reliable in any conditions.', icon: 'M12 3 C8 9 15 12 12 21 C9 17 5 15 12 3 Z' },
  { name: 'Saws',            href: '/category/saws/',          desc: 'Folding saws for bushcraft and camp use. Bow folders, and more.', icon: 'M3 12 L21 12 M5 10 L7 14 L9 10 L11 14 L13 10 L15 14 L17 10 L19 14' },
  { name: 'Shelter & Tarps', href: '/category/shelter-tarps/', desc: 'Tarps, bivvies, and shelter systems for lightweight bushcraft camping.', icon: 'M3 18 L12 5 L21 18 Z' },
];

const Categories = () => (
  <section className="section" style={{ background: 'var(--forest-deep)' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ marginBottom: 56 }}>
        <h2 className="display" style={{ fontSize: 'clamp(32px, 5vw, 56px)', margin: 0, color: 'var(--bone)' }}>
          Browse by <span style={{ color: 'var(--gold)' }}>category</span>
        </h2>
      </div>
      <div className="grid-5" style={{ background: 'var(--forest-rim)', borderRadius: 12, overflow: 'hidden' }}>
        {CATS.map((c) => (
          <a key={c.name} href={c.href} style={{
            position: 'relative', padding: '36px 24px',
            background: 'var(--forest-night)',
            display: 'flex', flexDirection: 'column', gap: 14,
            minHeight: 240, transition: 'all .3s ease', cursor: 'pointer',
          }}
            onMouseEnter={e => { e.currentTarget.style.background = 'var(--forest-mid)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = 'var(--forest-night)'; }}
          >
            <div style={{
              width: 44, height: 44, borderRadius: '50%',
              background: 'rgba(232,196,110,0.08)', border: '1px solid rgba(232,196,110,0.2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--gold)" strokeWidth="1.5">
                <path d={c.icon}/>
              </svg>
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--bone)' }}>{c.name}</div>
            <div style={{ fontSize: 13, color: 'var(--sage)', lineHeight: 1.55, flex: 1 }}>{c.desc}</div>
          </a>
        ))}
      </div>
      <div style={{ textAlign: 'right', marginTop: 16 }}>
        <a href="/gear/" style={{ color: 'var(--gold)', fontSize: 13, fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>
          All categories →
        </a>
      </div>
    </div>
  </section>
);

// ───── Featured buying guides ─────
const GUIDES = [
  { title: 'Best Bushcraft Knives',  href: '/reviews/best-bushcraft-knives/',          sub: 'Fixed-blade recommendations from budget to premium, with specs and honest assessments.' },
  { title: 'Best Bushcraft Axe',     href: '/reviews/best-bushcraft-axe/',             sub: 'Axes for wood processing, shelter building, and other bushcraft tasks.' },
  { title: 'Best Ferro Rod',         href: '/reviews/best-ferro-rod/',                 sub: 'Reliable fire starting tools for cold, wet, and extended trips.' },
  { title: 'Best Folding Saw',       href: '/reviews/best-folding-saw-for-bushcraft/', sub: 'Lightweight folding saws for bushcraft, clothes poles, and firewood.' },
];

const FeaturedGuides = () => (
  <section className="section" style={{ background: 'var(--forest-night)', borderTop: '1px solid var(--forest-rim)', borderBottom: '1px solid var(--forest-rim)' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto' }}>
      <div style={{ marginBottom: 56 }}>
        <h2 className="display" style={{ fontSize: 'clamp(32px, 5vw, 56px)', margin: 0, color: 'var(--bone)' }}>
          Featured <span style={{ color: 'var(--gold)' }}>buying guides</span>
        </h2>
      </div>
      <div className="grid-4" style={{ gap: 20 }}>
        {GUIDES.map(g => (
          <a key={g.title} href={g.href} className="card" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
            <div className="placeholder" style={{ aspectRatio: '4/3', borderRadius: 0 }}>
              {g.title.replace('Best ', '').toUpperCase()}
            </div>
            <div style={{ padding: 24, flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, margin: 0, color: 'var(--bone)', lineHeight: 1.2 }}>{g.title}</h3>
              <p style={{ fontSize: 13, color: 'var(--sage)', lineHeight: 1.55, margin: 0, flex: 1 }}>{g.sub}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, color: 'var(--gold)', fontSize: 13, fontWeight: 500, marginTop: 8 }}>
                Read guide
                <svg width="12" height="12" viewBox="0 0 12 12"><path d="M1 6h9M7 3l3 3-3 3" stroke="currentColor" strokeWidth="1.4" fill="none"/></svg>
              </div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

// ───── New to bushcraft ─────
const SKILLS = [
  { label: 'Beginner Bushcraft Kit',     href: '/posts/bushcraft-starter-kit/' },
  { label: 'Essential Gear List',        href: '/posts/bushcraft-starter-kit/' },
  { label: 'Best Bushcraft Knives',      href: '/reviews/best-bushcraft-knives/' },
  { label: 'How to Use a Ferro Rod',     href: '/posts/how-to-use-a-ferro-rod/' },
  { label: 'Shelter Building Basics',    href: '/posts/bushcraft-shelter-guide/' },
  { label: 'What is a Bushcraft Knife?', href: '/posts/what-is-a-bushcraft-knife/' },
];

const SkillsStrip = () => (
  <section className="section" style={{ background: 'var(--forest-deep)' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80 }}>
      <div className="sticky-col">
        <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 48px)', margin: '0 0 20px', color: 'var(--bone)' }}>
          New to <span style={{ color: 'var(--gold)' }}>bushcraft?</span>
        </h2>
        <p style={{ color: 'var(--sage)', fontSize: 16, lineHeight: 1.6 }}>
          Start with the essentials. These guides cover everything you need to get your first kit together and learn the foundational skills.
        </p>
      </div>
      <ol style={{ listStyle: 'none', padding: 0, margin: 0, borderTop: '1px solid var(--forest-rim)' }}>
        {SKILLS.map((s, i) => (
          <li key={s.label} style={{ borderBottom: '1px solid var(--forest-rim)' }}>
            <a href={s.href} style={{
              display: 'grid', gridTemplateColumns: '60px 1fr auto',
              gap: 24, alignItems: 'center', padding: '24px 0',
              transition: 'all .25s', color: 'inherit',
            }}
              onMouseEnter={e => { e.currentTarget.style.paddingLeft = '12px'; e.currentTarget.style.background = 'rgba(232,196,110,0.03)'; }}
              onMouseLeave={e => { e.currentTarget.style.paddingLeft = '0'; e.currentTarget.style.background = 'transparent'; }}
            >
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--gold)' }}>{String(i+1).padStart(2,'0')}</span>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--bone)' }}>{s.label}</div>
              <span style={{ color: 'var(--moss)', fontSize: 18 }}>→</span>
            </a>
          </li>
        ))}
      </ol>
    </div>
  </section>
);

// ───── Methodology ─────
const Methodology = () => {
  const items = [
    { title: 'No fake testing claims', body: "When a product has not been personally tested, we say so clearly. Most recommendations are research-based: specs, materials, reputation, user reviews, and expert consensus." },
    { title: 'Real product placement', body: "Products are recommended on merit, not because a brand paid for the spot. Affiliate links help fund the site but do not influence which products are recommended." },
    { title: 'Updated regularly',       body: "Prices change. Products get discontinued. We update buying guides when there is a meaningful change in availability or a better option becomes available." },
  ];
  return (
    <section className="section" style={{ background: 'var(--forest-night)', borderTop: '1px solid var(--forest-rim)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <h2 className="display" style={{ fontSize: 'clamp(28px, 4vw, 52px)', margin: 0, color: 'var(--bone)' }}>
            How we make <span style={{ color: 'var(--gold)' }}>recommendations</span>
          </h2>
        </div>
        <div className="grid-3" style={{ gap: 24 }}>
          {items.map((it, i) => (
            <div key={i} className="card" style={{ padding: 32 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                <span style={{
                  width: 28, height: 28, borderRadius: '50%',
                  background: 'rgba(232,196,110,0.12)', border: '1px solid rgba(232,196,110,0.3)',
                  color: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 12, fontFamily: 'var(--font-mono)',
                }}>{String(i+1).padStart(2,'0')}</span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 22, margin: 0, color: 'var(--bone)' }}>{it.title}</h3>
              </div>
              <p style={{ color: 'var(--sage)', fontSize: 14, lineHeight: 1.65, margin: 0 }}>{it.body}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <a href="/methodology/" style={{ color: 'var(--gold)', fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
            Read our full methodology →
          </a>
        </div>
      </div>
    </section>
  );
};

// ───── Footer ─────
const FOOTER_COLS = [
  {
    h: 'Categories',
    items: [
      { label: 'Knives',          href: '/category/knives/' },
      { label: 'Axes & Hatchets', href: '/category/axes-hatchets/' },
      { label: 'Fire Starting',   href: '/category/fire-starting/' },
      { label: 'Saws',            href: '/category/saws/' },
      { label: 'Shelter & Tarps', href: '/category/shelter-tarps/' },
      { label: 'Water Filtration',href: '/category/water-filtration/' },
      { label: 'Backpacks',       href: '/category/backpacks/' },
      { label: 'All Gear',        href: '/gear/' },
    ],
  },
  {
    h: 'Buying Guides',
    items: [
      { label: 'Best Bushcraft Knives', href: '/reviews/best-bushcraft-knives/' },
      { label: 'Best Bushcraft Axe',    href: '/reviews/best-bushcraft-axe/' },
      { label: 'Best Hatchet',          href: '/reviews/best-hatchet-for-bushcraft/' },
      { label: 'Best Ferro Rod',        href: '/reviews/best-ferro-rod/' },
      { label: 'Best Folding Saw',      href: '/reviews/best-folding-saw-for-bushcraft/' },
      { label: 'Best Bushcraft Tarp',   href: '/reviews/best-bushcraft-tarp/' },
      { label: 'Best Water Filter',     href: '/reviews/best-water-filter-for-bushcraft/' },
      { label: 'Best Budget Knife',     href: '/reviews/best-budget-bushcraft-knife/' },
      { label: 'Best Backpack',         href: '/reviews/best-bushcraft-backpack/' },
    ],
  },
  {
    h: 'Learn',
    items: [
      { label: 'What is bushcraft?',         href: '/posts/what-is-bushcraft/' },
      { label: 'Essential bushcraft gear',   href: '/posts/essential-bushcraft-gear/' },
      { label: 'Bushcraft Starter Kit',      href: '/posts/bushcraft-starter-kit/' },
      { label: 'Core Bushcraft Skills',      href: '/posts/bushcraft-skills/' },
      { label: 'How to Use a Ferro Rod',     href: '/posts/how-to-use-a-ferro-rod/' },
      { label: 'Shelter Building Guide',     href: '/posts/bushcraft-shelter-guide/' },
      { label: 'How to Set Up a Tarp',       href: '/posts/bushcraft-tarp-shelter/' },
      { label: 'What Is a Bushcraft Knife?', href: '/posts/what-is-a-bushcraft-knife/' },
      { label: 'Free Camping Near You',      href: '/posts/free-camping-near-you/' },
      { label: 'Dispersed Camping Guide',    href: '/posts/dispersed-camping-guide/' },
      { label: 'BLM Land Camping Rules',     href: '/posts/blm-land-camping-rules/' },
    ],
  },
  {
    h: 'Reviews',
    items: [
      { label: 'Morakniv Companion',             href: '/reviews/mora-companion-review/' },
      { label: 'Morakniv Bushcraft Black',      href: '/reviews/morakniv-bushcraft-review/' },
      { label: 'Benchmade 162 Bushcrafter',     href: '/reviews/benchmade-bushcrafter-162-review/' },
      { label: 'ESEE-4',                        href: '/reviews/esee-4-review/' },
      { label: 'Gransfors Bruks Small Forest Axe', href: '/reviews/gransfors-bruks-small-forest-axe-review/' },
      { label: 'About',               href: '/about/' },
      { label: 'Methodology',         href: '/methodology/' },
      { label: 'Affiliate Disclosure',href: '/affiliate-disclosure/' },
      { label: 'Privacy Policy',      href: '/privacy/' },
    ],
  },
];

const Footer = () => (
  <footer style={{ background: '#070f0a', borderTop: '1px solid var(--forest-rim)', padding: '80px 56px 40px' }}>
    <div style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div className="footer-brand-row">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
              <path d="M12 2 L4 14 L9 14 L5 22 L19 22 L15 14 L20 14 Z" fill="#e8c46e"/>
            </svg>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--bone)' }}>
              Bushcraft<span style={{ color: 'var(--gold)' }}>Den</span>
            </span>
          </div>
          <p style={{ color: 'var(--sage)', fontSize: 14, maxWidth: 320, lineHeight: 1.65, marginBottom: 24 }}>
            Practical gear knowledge for the outdoors. Honest reviews, plain-english buying guides, and the foundational skills behind them.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {[
              { l: 'YouTube',   h: 'https://youtube.com/@bushcraftden' },
              { l: 'Instagram', h: 'https://instagram.com/bushcraftden' },
              { l: 'Pinterest', h: 'https://pinterest.com/bushcraftden' },
              { l: 'RSS',       h: '/feed/' },
            ].map(s => (
              <a key={s.l} href={s.h} rel="noopener" style={{
                padding: '6px 12px', fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--sage)',
                border: '1px solid var(--forest-rim)', borderRadius: 999,
              }}>{s.l}</a>
            ))}
          </div>
        </div>

        <div className="footer-link-cols">
          {FOOTER_COLS.map(col => (
            <div key={col.h}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: 18 }}>{col.h}</div>
              {col.items.map(i => (
                <div key={i.label} style={{ marginBottom: 10 }}>
                  <a href={i.href} style={{ color: 'var(--sage)', fontSize: 13, lineHeight: 1.5, transition: 'color .2s' }}
                     onMouseEnter={e => e.currentTarget.style.color = 'var(--gold)'}
                     onMouseLeave={e => e.currentTarget.style.color = ''}>{i.label}</a>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>

      <div style={{
        padding: '20px 24px', background: 'var(--forest-night)', border: '1px solid var(--forest-rim)',
        borderRadius: 10, fontSize: 12, color: 'var(--moss)', lineHeight: 1.6, marginBottom: 32,
        fontFamily: 'var(--font-mono)', letterSpacing: '0.02em',
      }}>
        <strong style={{ color: 'var(--gold)', textTransform: 'uppercase', letterSpacing: '0.12em', fontSize: 11, marginRight: 8 }}>Affiliate disclosure:</strong>
        BushcraftDen is reader-supported. Some links on this site are affiliate links; we may earn a small commission when you buy through them, at no extra cost to you. This does not influence which products we recommend. <a href="/affiliate-disclosure/" style={{ color: 'var(--gold)', borderBottom: '1px solid' }}>Read the full disclosure</a>.
      </div>

      <div style={{ borderTop: '1px solid var(--forest-rim)', paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, color: 'var(--moss)', fontFamily: 'var(--font-mono)', flexWrap: 'wrap', gap: 12 }}>
        <span>© 2026 BushcraftDen — All rights reserved</span>
        <span>Made in the woods · Updated weekly</span>
      </div>
    </div>
  </footer>
);

const VariationA = () => (
  <div style={{ background: 'var(--forest-deep)' }}>
    <HeroA/>
    <Categories/>
    <FeaturedGuides/>
    <SkillsStrip/>
    <Methodology/>
    <Footer/>
  </div>
);

window.VariationA      = VariationA;
window.SharedFooter    = Footer;
window.SharedNav       = NavA;
window.SharedStickyNav = StickyNav;