// site-footer.jsx — Reusable footer (extracted from pricing-faq)
// Themed via useTokens.

function SiteFooter() {
  const T = window.useTokens();
  const { mobile } = window.useViewport();
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const time = now.toISOString().replace('T', ' ').slice(0, 19) + ' UTC';

  return (
    <footer style={{
      position: 'relative', background: T.bg, color: T.text,
      padding: mobile ? '56px 16px 24px' : '72px 40px 28px', overflow: 'hidden',
      borderTop: `1px solid ${T.border}`,
    }}>
      {/* Topo coastline strip */}
      <svg viewBox="0 0 1600 80" preserveAspectRatio="none"
        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: 80,
          opacity: 0.4, pointerEvents: 'none' }}>
        <path d="M 0 60 Q 200 20, 400 50 T 800 30 Q 1000 10, 1200 40 T 1600 50"
          stroke={T.amber} strokeWidth="0.6" fill="none" opacity="0.5"/>
        <path d="M 0 70 Q 200 40, 400 60 T 800 45 Q 1000 25, 1200 55 T 1600 60"
          stroke={T.text} strokeWidth="0.4" fill="none" opacity="0.4"/>
      </svg>

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr 1fr' : '2fr 1fr 1fr 1fr',
          gap: mobile ? 28 : 48, marginBottom: mobile ? 36 : 56,
        }}>
          {/* Brand */}
          <div style={{ gridColumn: mobile ? '1 / -1' : 'auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <svg width="28" height="28" viewBox="0 0 100 100">
                <path d="M50 4 L88 26 L88 74 L50 96 L12 74 L12 26 Z"
                  fill="none" stroke={T.text} strokeWidth="3" strokeLinejoin="round"/>
                <path d="M50 14 L80 31 L80 69 L50 86 L20 69 L20 31 Z"
                  fill="none" stroke={T.text} strokeWidth="1" strokeLinejoin="round" opacity="0.4"/>
                <g transform="rotate(28 50 50)">
                  <path d="M50 22 L54 50 L50 56 L46 50 Z" fill={T.amber}/>
                  <path d="M50 78 L46 50 L50 44 L54 50 Z" fill={T.text} opacity="0.7"/>
                </g>
                <circle cx="50" cy="50" r="2.5" fill={T.text}/>
              </svg>
              <span style={{ fontFamily: T.mono, fontSize: 12, fontWeight: 600,
                letterSpacing: 2, color: T.text }}>
                CAMPSITE SNIPER
              </span>
            </div>
            <p style={{
              fontFamily: T.mono, fontSize: 12, color: T.textMute,
              lineHeight: 1.6, margin: 0, maxWidth: 320,
            }}>
              Operational campsite watch. Built by people who lost too
              many weekends to refreshing the wrong page.
            </p>
          </div>

          <FooterCol T={T} title="PRODUCT" links={[
            ['How it works', 'index.html#how-it-works'],
            ['Pricing', 'index.html#pricing'],
            ['FAQ', 'index.html#faq'],
            ['Download', 'Download.html'],
          ]}/>
          <FooterCol T={T} title="COMPANY" links={[
            ['Trust', 'Trust.html'],
            ['Contact', 'Contact.html'],
            ['Status', 'Status.html'],
          ]}/>
          <FooterCol T={T} title="LEGAL" links={[
            ['Terms', 'Terms.html'],
            ['Privacy', 'Privacy.html'],
            ['Refunds', 'Refunds.html'],
            ['Acceptable use', 'Acceptable Use.html'],
          ]}/>
        </div>

        <div style={{
          paddingTop: 24, borderTop: `1px solid ${T.border}`,
          display: 'flex',
          justifyContent: 'space-between',
          flexDirection: mobile ? 'column' : 'row',
          flexWrap: 'wrap', gap: mobile ? 14 : 18,
          fontFamily: T.mono, fontSize: 10, letterSpacing: 1.3, color: T.textDim,
        }}>
          <div style={{ display: 'flex', gap: mobile ? 12 : 24, flexWrap: 'wrap' }}>
            <span>© 2026 CAMPSITE SNIPER</span>
            <span style={{ opacity: 0.4 }}>│</span>
            <span>v1.0 · BUILT FOR THE LONG WAIT</span>
            {!mobile && <span style={{ opacity: 0.4 }}>│</span>}
            {!mobile && <span>N 37.74° W 119.57°</span>}
          </div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <span style={{
              width: 6, height: 6, borderRadius: '50%', background: T.pine2,
              boxShadow: `0 0 8px ${T.pine2}`,
              animation: 'sf-led-pulse 1.6s ease-in-out infinite',
            }}/>
            <span>SYSTEMS NOMINAL</span>
            <span style={{ opacity: 0.4 }}>│</span>
            <span style={{ color: T.textMute }}>{time}</span>
          </div>
        </div>

        {/* Tyrannosaurx parent-company strip */}
        <div style={{
          marginTop: mobile ? 20 : 28,
          paddingTop: mobile ? 18 : 22,
          borderTop: `1px solid ${T.hairline}`,
          display: 'flex', flexWrap: 'wrap',
          justifyContent: mobile ? 'flex-start' : 'space-between',
          alignItems: 'center', gap: mobile ? 10 : 18,
          fontFamily: T.mono, fontSize: 10, letterSpacing: 1.4, color: T.textDim,
        }}>
          <a href="https://tyrannosaurx.com" target="_blank" rel="noopener"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              color: T.textMute, textDecoration: 'none',
              transition: 'color 0.2s',
            }}
            onMouseEnter={e => e.currentTarget.style.color = T.text}
            onMouseLeave={e => e.currentTarget.style.color = T.textMute}>
            {/* Tiny T-Rex silhouette, amber-tinted, brand-match for parent co */}
            <svg width="22" height="20" viewBox="0 0 64 56" fill="none"
              style={{ flexShrink: 0 }} aria-hidden="true">
              <path
                d="M44 4 C 50 4, 54 8, 54 14 L 54 18 L 56 18 L 58 16 L 60 18 L 58 21 L 54 22 L 53 24 L 56 26 L 56 30 L 50 30 L 48 28 L 44 32 L 44 38 L 50 38 L 50 42 L 46 46 L 42 46 L 40 42 L 38 38 L 32 38 L 30 42 L 26 42 L 24 38 L 22 36 L 16 36 L 14 38 L 14 42 L 18 46 L 14 46 L 8 42 L 8 36 L 12 30 L 18 28 L 28 26 L 34 22 L 36 18 L 38 12 L 42 6 Z"
                fill={T.amber}/>
              <circle cx="50" cy="14" r="1.2" fill={T.bg}/>
            </svg>
            <span>A TYRANNOSAURX COMPANY</span>
          </a>
          <span style={{ opacity: 0.5 }}>
            tyrannosaurx.com ↗
          </span>
        </div>
      </div>
      <style>{`
        @keyframes sf-led-pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ T, title, links }) {
  return (
    <div>
      <div style={{
        fontFamily: T.mono, fontSize: 10, letterSpacing: 2,
        color: T.textDim, marginBottom: 16,
      }}>
        {title}
      </div>
      <ul style={{
        listStyle: 'none', margin: 0, padding: 0,
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        {links.map(([label, href]) => (
          <li key={label}>
            <a href={href} style={{
              fontFamily: T.mono, fontSize: 12, color: T.text,
              textDecoration: 'none', letterSpacing: 0.3,
              transition: 'color 0.2s',
            }}
              onMouseEnter={e => e.currentTarget.style.color = T.amber}
              onMouseLeave={e => e.currentTarget.style.color = T.text}>
              {label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.SiteFooter = SiteFooter;