// pricing-faq.jsx — Pricing, FAQ, Footer for marketing site
//
// Design language: Dark Precision OS, instrument readouts.
// Pricing: two "instrument panels" side by side, each with status LEDs,
// metric readouts, and a draw-on border. The Pro panel glows amber.
// FAQ: terminal-log accordion. Each Q is a `> query` line with [+] toggle;
// expands inline with mono answer + horizontal rule separators.
// Footer: topo coastline strip + nav + lat/long timestamp.

const PF_KEY_MAP = {
  bg: 'bg', bgDeep: 'bg', bgPanel: 'bg3',
  ink: 'text', inkMute: 'textMute', inkDim: 'textDim',
  amber: 'amber', amberDim: 'amberDim',
  amberGlow: 'amberFog',
  pine: 'pine2',
  divider: 'border', panel: 'bg3', panelHi: 'bg4',
};
const PF_C = new Proxy({}, {
  get(_t, k) { return window.CS_TOKENS[PF_KEY_MAP[k] || k]; },
});
const PF_MONO = '"SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace';

// ── Reveal hook (in-viewport flag) ───────────────────────
function useInView(ref, threshold = 0.15) {
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); obs.disconnect(); }
    }, { threshold });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return seen;
}

// ─────────────────────────────────────────────────────────
// PRICING
// ─────────────────────────────────────────────────────────
function Pricing() {
  if (window.useTokens) window.useTokens();
  const { mobile } = window.useViewport();
  const ref = React.useRef(null);
  const seen = useInView(ref);

  return (
    <section id="pricing" ref={ref} style={{
      position: 'relative', minHeight: '100vh', background: PF_C.bgDeep,
      padding: mobile ? '80px 16px 60px' : '120px 40px 100px', overflow: 'hidden',
      color: PF_C.ink,
    }}>
      {/* Faint topo background continues from prior section */}
      <PricingBgTopo/>

      {/* Top fade for seam continuity */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 120,
        background: `linear-gradient(to bottom, ${PF_C.bgDeep}, transparent)`,
        pointerEvents: 'none',
      }}/>

      <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        {/* Section heading */}
        <div style={{ textAlign: 'center', marginBottom: mobile ? 40 : 64 }}>
          <div style={{
            fontFamily: PF_MONO, fontSize: 11, letterSpacing: 2,
            color: PF_C.amber, marginBottom: 16,
          }}>
            {mobile ? 'PRICING' : '─── PRICING ───'}
          </div>
          <h2 style={{
            fontFamily: PF_MONO,
            fontSize: mobile ? 'clamp(26px, 8vw, 36px)' : 'clamp(36px, 4.6vw, 56px)',
            fontWeight: 600,
            letterSpacing: '-0.01em', lineHeight: 1.05, margin: 0,
            color: PF_C.ink, textTransform: 'uppercase',
          }}>
            Two tiers. One purpose.<br/>Catch the cancellation.
          </h2>
          <p style={{
            fontFamily: PF_MONO, fontSize: 13, color: PF_C.inkMute,
            marginTop: 20, maxWidth: 580, marginInline: 'auto', lineHeight: 1.6,
          }}>
            Start with a 7-day Pro trial — full Pro capabilities, no charge.
            Auto-renews into Pro at $9.99/mo unless canceled before the trial ends.
            Cancel any time. Refund within 30 days, no questions.
          </p>
        </div>

        {/* Two-panel instrument layout */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: mobile ? 16 : 24, alignItems: 'stretch',
        }}>
          <PricingPanel
            seen={seen}
            tier="BASIC"
            tagline="THE STARTER"
            price="3.99"
            cadence="/ month"
            led="#3A7460"
            ledLabel="ACTIVE"
            features={[
              ['1 active watch', true],
              ['Push notifications', true],
              ['Optional email alerts', true],
              ['All launch inventory types', true],
              ['Watch dashboard + alert history', true],
              ['SMS alerts', false],
              ['Multiple active watches', false],
              ['Faster check cadence', false],
            ]}
            cta="Start with Basic"
            ctaStyle="ghost"
            delay={0}
          />
          <PricingPanel
            seen={seen}
            tier="PRO"
            tagline="THE OPERATOR"
            price="9.99"
            cadence="/ month"
            led={PF_C.amber}
            ledLabel="ARMED"
            badge="7-DAY TRIAL"
            features={[
              ['Up to 50 active watches', true],
              ['Push notifications', true],
              ['Optional email alerts', true],
              ['Faster check cadence', true],
              ['Hot-inventory acceleration', true],
              ['All launch inventory types', true],
              ['Watch dashboard + alert history', true],
              ['Cancel anytime', true],
            ]}
            cta="Start 7-day Pro Trial"
            ctaStyle="primary"
            highlight
            delay={0.15}
          />
        </div>

        {/* Trust strip — verifiable policy commitments, not fabricated traffic */}
        <div style={{
          marginTop: 56, padding: '20px 24px',
          border: `1px solid ${PF_C.divider}`,
          borderRadius: 4, background: PF_C.bgPanel,
          display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap', gap: 24,
          opacity: seen ? 1 : 0, transform: `translateY(${seen ? 0 : 20}px)`,
          transition: 'all 0.6s ease 0.4s',
        }}>
          <TrustStat label="REFUND WINDOW" value="30 DAYS"/>
          <TrustStat label="CANCEL POLICY" value="ONE CLICK"/>
          <TrustStat label="DATA SOLD" value="NEVER"/>
          <TrustStat label="PRO TRIAL" value="7 DAYS" tint={PF_C.amber}/>
        </div>

        {/* Trial disclosure — App Store requires this in plain language */}
        <p style={{
          marginTop: 28, fontFamily: PF_MONO, fontSize: 11, color: PF_C.inkDim,
          lineHeight: 1.55, textAlign: 'center', maxWidth: 720, marginInline: 'auto',
        }}>
          Your 7-day Pro trial auto-renews into Pro at $9.99/month unless you cancel
          at least 24 hours before the trial ends. Annual plans available
          ($39.99/yr Basic, $99.99/yr Pro). Manage in your account or App Store
          settings. Subscriptions billed via Apple App Store or Google Play.
        </p>
      </div>
    </section>
  );
}

function PricingPanel({ seen, tier, tagline, price, cadence, led, ledLabel,
                        features, cta, ctaStyle, highlight, badge, delay = 0 }) {
  const { mobile } = window.useViewport();
  return (
    <div style={{
      position: 'relative',
      background: PF_C.bgPanel,
      border: `1px solid ${highlight ? PF_C.amber : PF_C.divider}`,
      padding: mobile ? '24px 18px 20px' : '32px 28px 28px',
      opacity: seen ? 1 : 0,
      transform: `translateY(${seen ? 0 : 24}px)`,
      transition: `all 0.6s ease ${delay}s`,
      boxShadow: highlight
        ? `0 0 60px ${PF_C.amberGlow}, inset 0 0 40px rgba(232,163,61,0.04)`
        : 'none',
    }}>
      {/* Corner crosshair marks (instrument panel feel) */}
      <Corner pos="tl" color={highlight ? PF_C.amber : PF_C.divider}/>
      <Corner pos="tr" color={highlight ? PF_C.amber : PF_C.divider}/>
      <Corner pos="bl" color={highlight ? PF_C.amber : PF_C.divider}/>
      <Corner pos="br" color={highlight ? PF_C.amber : PF_C.divider}/>

      {/* Top header strip */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingBottom: 18, borderBottom: `1px solid ${PF_C.divider}`,
        marginBottom: 24,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{
            width: 8, height: 8, borderRadius: '50%', background: led,
            boxShadow: `0 0 10px ${led}`,
            animation: highlight ? 'pf-led-pulse 1.6s ease-in-out infinite' : 'none',
          }}/>
          <span style={{
            fontFamily: PF_MONO, fontSize: 10, letterSpacing: 2,
            color: led, fontWeight: 600,
          }}>
            {ledLabel}
          </span>
        </div>
        {badge && (
          <span style={{
            fontFamily: PF_MONO, fontSize: 9.5, letterSpacing: 1.5,
            color: PF_C.amber, padding: '4px 8px',
            border: `1px solid ${PF_C.amber}`,
          }}>
            {badge}
          </span>
        )}
      </div>

      {/* Tier name */}
      <div style={{
        fontFamily: PF_MONO, fontSize: 11, letterSpacing: 2,
        color: PF_C.inkMute, marginBottom: 4,
      }}>
        {tagline}
      </div>
      <div style={{
        fontFamily: PF_MONO, fontSize: 32, fontWeight: 600, letterSpacing: '-0.01em',
        color: PF_C.ink, marginBottom: 20, textTransform: 'uppercase',
      }}>
        {tier}
      </div>

      {/* Price */}
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 8,
        marginBottom: mobile ? 24 : 32,
        paddingBottom: mobile ? 18 : 24, borderBottom: `1px solid ${PF_C.divider}`,
      }}>
        <span style={{
          fontFamily: PF_MONO, fontSize: 14, color: PF_C.inkDim,
        }}>
          $
        </span>
        <span style={{
          fontFamily: PF_MONO, fontSize: mobile ? 52 : 64, fontWeight: 600,
          letterSpacing: '-0.04em', lineHeight: 1,
          color: highlight ? PF_C.amber : PF_C.ink,
        }}>
          {price}
        </span>
        <span style={{
          fontFamily: PF_MONO, fontSize: 13, color: PF_C.inkMute,
          marginLeft: 4,
        }}>
          {cadence}
        </span>
      </div>

      {/* Features */}
      <ul style={{
        listStyle: 'none', padding: 0, margin: '0 0 32px',
        display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        {features.map(([text, on], i) => (
          <li key={i} style={{
            fontFamily: PF_MONO, fontSize: 12.5,
            color: on ? PF_C.ink : PF_C.inkDim,
            display: 'flex', alignItems: 'center', gap: 12,
            opacity: seen ? 1 : 0,
            transition: `opacity 0.4s ease ${delay + 0.3 + i * 0.04}s`,
          }}>
            <span style={{
              width: 14, height: 14, flexShrink: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `1px solid ${on ? (highlight ? PF_C.amber : PF_C.pine) : PF_C.divider}`,
            }}>
              {on ? (
                <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
                  <path d="M2 5 L4 7 L8 3" stroke={highlight ? PF_C.amber : PF_C.pine}
                    strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              ) : (
                <span style={{ fontSize: 10, color: PF_C.inkDim, lineHeight: 1 }}>·</span>
              )}
            </span>
            <span style={{ textDecoration: on ? 'none' : 'line-through', textDecorationColor: PF_C.inkDim }}>
              {text}
            </span>
          </li>
        ))}
      </ul>

      {/* CTA */}
      <button style={{
        width: '100%', height: 48,
        background: ctaStyle === 'primary' ? PF_C.amber : 'transparent',
        border: `1px solid ${ctaStyle === 'primary' ? PF_C.amber : PF_C.divider}`,
        color: ctaStyle === 'primary' ? PF_C.bg : PF_C.ink,
        fontFamily: PF_MONO, fontSize: 12, fontWeight: 600, letterSpacing: 1.8,
        textTransform: 'uppercase', cursor: 'pointer',
        transition: 'all 0.2s',
      }}
        onMouseEnter={e => {
          e.currentTarget.style.transform = 'translateY(-1px)';
          if (ctaStyle !== 'primary') e.currentTarget.style.borderColor = PF_C.amber;
        }}
        onMouseLeave={e => {
          e.currentTarget.style.transform = 'translateY(0)';
          if (ctaStyle !== 'primary') e.currentTarget.style.borderColor = PF_C.divider;
        }}>
        {cta} ↗
      </button>

      <style>{`
        @keyframes pf-led-pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.6; transform: scale(0.85); }
        }
      `}</style>
    </div>
  );
}

function Corner({ pos, color }) {
  const positions = {
    tl: { top: -1, left: -1, transform: 'none' },
    tr: { top: -1, right: -1, transform: 'rotate(90deg)' },
    bl: { bottom: -1, left: -1, transform: 'rotate(-90deg)' },
    br: { bottom: -1, right: -1, transform: 'rotate(180deg)' },
  };
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none"
      style={{ position: 'absolute', ...positions[pos], color }}>
      <path d="M0 6 V0 H6" stroke={color} strokeWidth="1.5"/>
    </svg>
  );
}

function TrustStat({ label, value, tint }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 120 }}>
      <span style={{ fontFamily: PF_MONO, fontSize: 9.5, letterSpacing: 1.4, color: PF_C.inkDim }}>
        {label}
      </span>
      <span style={{
        fontFamily: PF_MONO, fontSize: 14, fontWeight: 600, letterSpacing: 0.5,
        color: tint || PF_C.ink,
      }}>
        {value}
      </span>
    </div>
  );
}

function PricingBgTopo() {
  return (
    <svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%',
        opacity: 0.1, pointerEvents: 'none' }}>
      <g stroke={PF_C.ink} fill="none" strokeWidth="0.5">
        {pricingTopoBlob(800, 450, 80, 0)}
        {pricingTopoBlob(800, 450, 140, 0.05)}
        {pricingTopoBlob(800, 450, 220, 0.1)}
        {pricingTopoBlob(800, 450, 320, 0.16)}
        {pricingTopoBlob(800, 450, 440, 0.22)}
        {pricingTopoBlob(800, 450, 580, 0.28)}
      </g>
    </svg>
  );
}

function pricingTopoBlob(cx, cy, r, distort) {
  const points = 32;
  let d = '';
  for (let i = 0; i <= points; i++) {
    const a = (i / points) * Math.PI * 2;
    const wobble = Math.sin(a * 4) * distort + Math.cos(a * 7) * distort * 0.5;
    const rr = r * (1 + wobble);
    const x = cx + Math.cos(a) * rr;
    const y = cy + Math.sin(a) * rr * 0.6;
    d += (i === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1) + ' ';
  }
  return <path key={`p-${cx}-${cy}-${r}`} d={d + 'Z'}/>;
}

// ─────────────────────────────────────────────────────────
// FAQ — terminal log style accordion
// ─────────────────────────────────────────────────────────
const FAQS = [
  {
    q: "Is this allowed by Recreation.gov?",
    a: "Yes. We respect their robots.txt, rate-limit our probes, and identify our agent. We're not scalpers — we notify you the moment a site you specifically chose becomes available, and you complete the booking on Recreation.gov yourself. No payment data ever leaves your hands.",
  },
  {
    q: "How fast will I get the alert?",
    a: "As fast as we can detect inventory and route the notification — typically a push on your phone within seconds of detection. Pro and trial watches get accelerated check cadence; hot inventory gets the fastest cadence we run. We don't publish exact intervals because we're constantly tuning them — but Pro is materially faster than Basic.",
  },
  {
    q: "Will this guarantee I get a campsite?",
    a: "No. We give you a head start, not a guarantee. Popular sites like Yosemite Upper Pines on a holiday weekend can still get claimed in under a minute. But you'll be in the running with a deeplink ready, instead of manually refreshing at 7am.",
  },
  {
    q: "What if I don't get a site after a month?",
    a: "Refund within 30 days, prorated to the day. One click in your account settings or one email to refund@campsitesniper.com. No questions, no forms, no chat bot.",
  },
  {
    q: "How many sites can I watch?",
    a: "Basic: 1 active watch. Pro: 50 active watches. Each watch can target a single campground or an area covering multiple campgrounds — Pro watches get a much larger coverage budget than Basic.",
  },
  {
    q: "Can I monitor a whole region with filters, or only specific campgrounds?",
    a: "Both. Pin a single campground and lock on, or draw a region across multiple parks and stack filters — lakefront, riverfront, oceanfront, RV/trailer length, electric/water/sewer hookups, loop preferences, weekend nights, exact or at-least stay length. Example: \"All lakefront sites with a 35ft+ driveway in central Oregon, Friday–Sunday.\" That resolves to dozens of sites across multiple campgrounds and counts as one watch. Pro's coverage budget is large enough to cover most regional sweeps.",
  },
  {
    q: "What's the 7-day Pro trial?",
    a: "Sign up after creating your first watch and you get 7 days of full Pro capabilities, no charge. The trial auto-renews into paid Pro at $9.99/month unless you cancel at least 24 hours before it ends — same as any App Store / Play Store subscription. Saved watches stay yours either way.",
  },
  {
    q: "Do you sell my data?",
    a: "Never. We don't have ad partners, we don't sell to brokers, and we don't track you across the web. Recreation.gov credentials are never stored — the deeplink hands you off to Recreation.gov's authenticated session. Your account exists to deliver alerts and that's the whole product.",
  },
  {
    q: "Why is the app dark and weird looking?",
    a: "Because it's a precision instrument, not a vacation planner. We assume if you're here, you've already lost a campsite to someone faster than you. We made the tool to fix that — not to replace dreaming about the trip.",
  },
];

function FAQ() {
  if (window.useTokens) window.useTokens();
  const { mobile } = window.useViewport();
  const ref = React.useRef(null);
  const seen = useInView(ref);
  const [open, setOpen] = React.useState(0);  // first one open

  return (
    <section id="faq" ref={ref} style={{
      position: 'relative', minHeight: '100vh', background: PF_C.bgDeep,
      padding: mobile ? '80px 16px 60px' : '120px 40px 100px',
      color: PF_C.ink, overflow: 'hidden',
    }}>
      {/* Hex background corner accent */}
      <FaqHexBg/>

      <div style={{ maxWidth: 920, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        {/* Heading */}
        <div style={{ marginBottom: mobile ? 32 : 56 }}>
          <div style={{
            fontFamily: PF_MONO, fontSize: 11, letterSpacing: 2,
            color: PF_C.amber, marginBottom: 16,
          }}>
            {mobile ? 'FAQ' : '─── FAQ ───'}
          </div>
          <h2 style={{
            fontFamily: PF_MONO,
            fontSize: mobile ? 'clamp(26px, 8vw, 36px)' : 'clamp(36px, 4.6vw, 56px)',
            fontWeight: 600,
            letterSpacing: '-0.01em', lineHeight: 1.05, margin: 0,
            color: PF_C.ink, textTransform: 'uppercase', maxWidth: 700,
          }}>
            Things you'll ask before you trust us.
          </h2>
        </div>

        {/* Terminal-style log */}
        <div style={{
          background: PF_C.bgPanel,
          border: `1px solid ${PF_C.divider}`,
          fontFamily: PF_MONO,
        }}>
          {/* Terminal header */}
          <div style={{
            padding: '12px 18px', borderBottom: `1px solid ${PF_C.divider}`,
            display: 'flex', alignItems: 'center', gap: 12,
            fontSize: 10.5, letterSpacing: 1.4, color: PF_C.inkDim,
          }}>
            <div style={{ display: 'flex', gap: 6 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#E5484D' }}/>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: PF_C.amber }}/>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: PF_C.pine }}/>
            </div>
            <span>~/CAMPSITE-SNIPER/SUPPORT — FAQ.LOG</span>
            <span style={{ marginLeft: 'auto', color: PF_C.pine }}>
              ● {FAQS.length} ENTRIES
            </span>
          </div>

          {/* FAQ items */}
          {FAQS.map((item, i) => (
            <FAQItem key={i} item={item} index={i}
              isOpen={open === i}
              onToggle={() => setOpen(open === i ? -1 : i)}
              seen={seen}
              delay={i * 0.04}/>
          ))}
        </div>

        {/* Footer prompt */}
        <div style={{
          marginTop: 32, padding: '16px 18px',
          fontFamily: PF_MONO, fontSize: 12, color: PF_C.inkMute,
          opacity: seen ? 1 : 0, transition: 'opacity 0.6s ease 0.5s',
        }}>
          <span style={{ color: PF_C.amber }}>{'>'}</span>{' '}
          Still have questions? Email us at{' '}
          <a href="mailto:hello@campsitesniper.com" style={{
            color: PF_C.ink, textDecoration: 'underline',
            textDecorationColor: PF_C.amber, textUnderlineOffset: 4,
          }}>
            hello@campsitesniper.com
          </a>
          <span style={{
            display: 'inline-block', width: 8, height: 14, marginLeft: 8,
            background: PF_C.amber, verticalAlign: '-2px',
            animation: 'pf-cursor 0.6s steps(2, start) infinite',
          }}/>
        </div>

        <style>{`
          @keyframes pf-cursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
        `}</style>
      </div>
    </section>
  );
}

function FAQItem({ item, index, isOpen, onToggle, seen, delay }) {
  return (
    <div style={{
      borderBottom: `1px solid ${PF_C.divider}`,
      opacity: seen ? 1 : 0,
      transform: `translateY(${seen ? 0 : 8}px)`,
      transition: `all 0.5s ease ${delay}s`,
    }}>
      <button onClick={onToggle} style={{
        width: '100%', padding: '18px 18px',
        background: 'transparent', border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: 14,
        fontFamily: PF_MONO, fontSize: 13, color: PF_C.ink,
        textAlign: 'left', letterSpacing: 0.2,
      }}
        onMouseEnter={e => e.currentTarget.style.background = 'rgba(232,163,61,0.04)'}
        onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
        <span style={{ color: PF_C.inkDim, fontSize: 11, minWidth: 28 }}>
          {String(index + 1).padStart(2, '0')}
        </span>
        <span style={{ color: PF_C.amber, fontSize: 12, marginRight: -4 }}>{'>'}</span>
        <span style={{ flex: 1 }}>{item.q}</span>
        <span style={{
          color: isOpen ? PF_C.amber : PF_C.inkDim,
          fontSize: 14, fontWeight: 600, transition: 'all 0.2s',
          transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
        }}>
          +
        </span>
      </button>
      <div style={{
        maxHeight: isOpen ? 320 : 0,
        overflow: 'hidden',
        transition: 'max-height 0.35s ease',
      }}>
        <div style={{
          padding: '0 18px 22px 70px',
          fontFamily: PF_MONO, fontSize: 12.5, lineHeight: 1.7,
          color: PF_C.inkMute,
        }}>
          {item.a}
        </div>
      </div>
    </div>
  );
}

function FaqHexBg() {
  return (
    <svg width="320" height="400" viewBox="0 0 320 400"
      style={{ position: 'absolute', top: 80, right: 0, opacity: 0.06,
        pointerEvents: 'none' }}>
      <defs>
        <pattern id="faq-hex" x="0" y="0" width="48" height="55.4" patternUnits="userSpaceOnUse">
          <path d="M24 0 L48 13.85 L48 41.55 L24 55.4 L0 41.55 L0 13.85 Z"
            fill="none" stroke={PF_C.ink} strokeWidth="0.5"/>
        </pattern>
        <radialGradient id="faq-fade" cx="100%" cy="0%" r="100%">
          <stop offset="0%" stopColor="white" stopOpacity="1"/>
          <stop offset="100%" stopColor="white" stopOpacity="0"/>
        </radialGradient>
        <mask id="faq-mask">
          <rect width="320" height="400" fill="url(#faq-fade)"/>
        </mask>
      </defs>
      <rect width="320" height="400" fill="url(#faq-hex)" mask="url(#faq-mask)"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────
function Footer() {
  if (window.useTokens) window.useTokens();
  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: PF_C.bg, color: PF_C.ink,
      padding: '72px 40px 28px', overflow: 'hidden',
      borderTop: `1px solid ${PF_C.divider}`,
    }}>
      {/* Topo coastline strip across the top */}
      <FooterCoastline/>

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative', zIndex: 2 }}>
        {/* Top: brand + columns */}
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr',
          gap: 48, marginBottom: 56,
        }}>
          {/* Brand */}
          <div>
            <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={PF_C.ink} strokeWidth="3" strokeLinejoin="round"/>
                <path d="M50 14 L80 31 L80 69 L50 86 L20 69 L20 31 Z"
                  fill="none" stroke={PF_C.ink} 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={PF_C.amber}/>
                  <path d="M50 78 L46 50 L50 44 L54 50 Z" fill={PF_C.ink} opacity="0.7"/>
                </g>
                <circle cx="50" cy="50" r="2.5" fill={PF_C.ink}/>
              </svg>
              <span style={{ fontFamily: PF_MONO, fontSize: 12, fontWeight: 600,
                letterSpacing: 2, color: PF_C.ink }}>
                CAMPSITE SNIPER
              </span>
            </div>
            <p style={{
              fontFamily: PF_MONO, fontSize: 12, color: PF_C.inkMute,
              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>

          {/* Cols */}
          <PF_FooterCol title="PRODUCT" links={['How it works', 'Pricing', 'Download', 'Status']}/>
          <PF_FooterCol title="COMPANY" links={['About', 'Trust', 'Press kit', 'Contact']}/>
          <PF_FooterCol title="LEGAL" links={['Terms', 'Privacy', 'Refunds', 'Acceptable use']}/>
        </div>

        {/* Stamp row */}
        <div style={{
          paddingTop: 24, borderTop: `1px solid ${PF_C.divider}`,
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 18,
          fontFamily: PF_MONO, fontSize: 10, letterSpacing: 1.3, color: PF_C.inkDim,
        }}>
          <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
            <span>© 2026 CAMPSITE SNIPER</span>
            <span style={{ opacity: 0.4 }}>│</span>
            <span>v1.0 · BUILT FOR THE LONG WAIT</span>
            <span style={{ opacity: 0.4 }}>│</span>
            <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: PF_C.pine,
              boxShadow: `0 0 8px ${PF_C.pine}`,
              animation: 'pf-led-pulse 1.6s ease-in-out infinite',
            }}/>
            <span>SYSTEMS NOMINAL</span>
            <span style={{ opacity: 0.4 }}>│</span>
            <span style={{ color: PF_C.inkMute }}>{time}</span>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes pf-led-pulse {
          0%, 100% { opacity: 1; }
          50% { opacity: 0.5; }
        }
      `}</style>
    </footer>
  );
}

function PF_FooterCol({ title, links }) {
  return (
    <div>
      <div style={{
        fontFamily: PF_MONO, fontSize: 10, letterSpacing: 2,
        color: PF_C.inkDim, marginBottom: 16,
      }}>
        {title}
      </div>
      <ul style={{
        listStyle: 'none', margin: 0, padding: 0,
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        {links.map(l => (
          <li key={l}>
            <a href="#" style={{
              fontFamily: PF_MONO, fontSize: 12, color: PF_C.ink,
              textDecoration: 'none', letterSpacing: 0.3,
              transition: 'color 0.2s',
            }}
              onMouseEnter={e => e.currentTarget.style.color = PF_C.amber}
              onMouseLeave={e => e.currentTarget.style.color = PF_C.ink}>
              {l}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

function FooterCoastline() {
  return (
    <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={PF_C.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={PF_C.ink} strokeWidth="0.4" fill="none" opacity="0.4"/>
    </svg>
  );
}

window.Pricing = Pricing;
window.FAQ = FAQ;
window.Footer = Footer;