// Afford-X · ALM agent — unique brand mark, state machine, floating chat.
const { useState, useRef, useEffect, useCallback, createContext, useContext } = React;

/* ============================================================
   The ALM mark — an Afford-X spark.
   A 4-point star rotated to read as the brand "X", with a green
   gradient core and an orbiting micro-spark (red accent nod to
   the Afford-X "X"). Distinct from any third-party logo.
   ============================================================ */
const STAR = 'M12 1.6C12.7 6.9 17.1 11.3 22.4 12C17.1 12.7 12.7 17.1 12 22.4C11.3 17.1 6.9 12.7 1.6 12C6.9 11.3 11.3 6.9 12 1.6Z';

function AlmMark({ size = 26, state = 'idle', tone = 'green', id = 'm' }) {
  const gid = `almg-${id}`;
  const core = tone === 'white' ? '#fff' : `url(#${gid})`;
  const sat = tone === 'white' ? 'rgba(255,255,255,0.9)' : 'var(--afx-red-bright)';
  return (
    <span className={`alm-mark alm-state-${state}`} aria-hidden="true">
      <svg width={size} height={size} viewBox="0 0 24 24">
        <defs>
          <linearGradient id={gid} x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#74C07F" />
            <stop offset="0.55" stopColor="var(--afx-green-500)" />
            <stop offset="1" stopColor="var(--afx-green-700)" />
          </linearGradient>
        </defs>
        <g className="alm-core" style={{ transform: 'rotate(45deg)', transformOrigin: '12px 12px' }}>
          <path d={STAR} fill={core} />
        </g>
        <g className="alm-orbit">
          <path d={STAR} fill={sat} transform="translate(20.5 4) scale(0.26)" />
        </g>
      </svg>
    </span>
  );
}

/* ============================================================
   Agent state machine (shared via context)
   phase: idle | engaged | listening | thinking | answering
   ============================================================ */
const GREETING = "Hi — I'm ALM, the Affordability Language Model behind Afford-X. Ask me anything about exclusion filters, segments, or how we make intent better.";
const SUGGESTIONS = [
  'What is the Exclusion Filter?',
  'How does ALM score affordability?',
  'Which industries do you serve?',
];

const SYS_PROMPT = `You are ALM, the Affordability Language Model — the AI agent that powers Afford-X, a martech platform.
Afford-X scores audiences on real purchasing power (not just intent) and offers a first-in-market one-click exclusion filter that removes window-shoppers before a campaign launches.
Key facts you can draw on: nearly 1 billion U.S. MAIDs and HEMs across 100+ data segments (income, credit, purchase behavior, intent); a Dollar Scoring Framework; GDPR/CCPA/LGPD compliant, consented/pseudonymized signals; verticals served include auto, luxury, financial services and e-commerce; tagline "We Make Intent Better."
Voice: confident, modern, benefit-led B2B. Speak to the visitor as "you", refer to Afford-X as "we". Keep replies under 70 words, no emoji, no markdown headers. Be concrete and helpful.`;

const AgentCtx = createContext(null);
const useAgent = () => useContext(AgentCtx);
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

function AgentProvider({ children }) {
  const [open, setOpen] = useState(false);
  const [phase, setPhase] = useState('idle');
  const [messages, setMessages] = useState([{ role: 'assistant', content: GREETING }]);
  const [draft, setDraft] = useState('');
  const busyRef = useRef(false);

  const openWidget = useCallback(() => {
    setOpen(true);
    setPhase((p) => (p === 'idle' ? 'engaged' : p));
  }, []);
  const closeWidget = useCallback(() => {
    setOpen(false);
    if (!busyRef.current) setPhase('idle');
  }, []);

  // listening reacts to visitor typing
  const onDraft = useCallback((v) => {
    setDraft(v);
    if (busyRef.current) return;
    setPhase(v.trim() ? 'listening' : 'engaged');
  }, []);

  const ask = useCallback(async (qRaw) => {
    const q = (qRaw == null ? draft : qRaw).trim();
    if (!q || busyRef.current) return;
    busyRef.current = true;
    setDraft('');
    setMessages((m) => [...m, { role: 'user', content: q }]);
    setPhase('thinking');

    // build short conversation context
    const history = messages.filter((m) => m.role === 'user' || m.role === 'assistant').slice(-6)
      .map((m) => `${m.role === 'user' ? 'Visitor' : 'ALM'}: ${m.content}`).join('\n');
    const prompt = `${SYS_PROMPT}\n\n${history ? 'Conversation so far:\n' + history + '\n\n' : ''}Visitor: ${q}\nALM:`;

    let reply = '';
    try {
      if (window.claude && window.claude.complete) {
        reply = await window.claude.complete(prompt);
      } else {
        throw new Error('no-api');
      }
    } catch (e) {
      reply = "We narrow your intent audience down to people with real purchasing power — our one-click Exclusion Filter removes window-shoppers before launch, so every ad dollar works harder. (Live answers activate when this page is shared.)";
      await sleep(900);
    }
    reply = (reply || '').trim();

    // stream the reply word-by-word for the "answering" state
    setPhase('answering');
    setMessages((m) => [...m, { role: 'assistant', content: '' }]);
    const parts = reply.split(/(\s+)/);
    let acc = '';
    for (const w of parts) {
      acc += w;
      setMessages((m) => { const c = m.slice(); c[c.length - 1] = { role: 'assistant', content: acc }; return c; });
      await sleep(24);
    }
    busyRef.current = false;
    setPhase(open ? 'engaged' : 'idle');
  }, [draft, messages, open]);

  const value = { open, phase, messages, draft, openWidget, closeWidget, onDraft, ask, busy: () => busyRef.current };
  return <AgentCtx.Provider value={value}>{children}</AgentCtx.Provider>;
}

/* ============================================================
   Header indicator — "Ask ALM" pill that reflects live state
   ============================================================ */
const LABELS = {
  idle: 'Ask ALM',
  engaged: 'ALM is here',
  listening: 'Listening…',
  thinking: 'Thinking…',
  answering: 'Answering…',
};
const DOT_COLOR = {
  idle: 'var(--afx-gray-400)',
  engaged: 'var(--afx-green-500)',
  listening: 'var(--afx-green-500)',
  thinking: 'var(--afx-yellow)',
  answering: 'var(--afx-green-500)',
};

function HeaderAgent() {
  const { phase, open, openWidget, closeWidget } = useAgent();
  const active = phase !== 'idle';
  return (
    <button
      onClick={open ? closeWidget : openWidget}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 9, cursor: 'pointer',
        height: 40, padding: '0 14px 0 10px', borderRadius: 999,
        border: `1.5px solid ${active ? 'var(--afx-green-500)' : 'var(--afx-gray-200)'}`,
        background: active ? 'var(--afx-green-50)' : '#fff',
        fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14,
        color: 'var(--afx-ink)', transition: 'border-color 0.18s ease, background 0.18s ease',
      }}
    >
      <AlmMark size={22} state={phase} id="hdr" />
      <span style={{ minWidth: 78, textAlign: 'left' }}>{LABELS[phase]}</span>
      <span className={active ? 'alm-dot' : ''} style={{ width: 8, height: 8, borderRadius: '50%', background: DOT_COLOR[phase], color: DOT_COLOR[phase], display: 'inline-block' }} />
    </button>
  );
}

/* ============================================================
   Floating widget — bottom-right bubble + chat panel
   ============================================================ */
function Bubble() {
  const { open, phase, openWidget } = useAgent();
  if (open) return null;
  const busy = phase === 'thinking' || phase === 'answering';
  return (
    <button
      onClick={openWidget}
      aria-label="Open ALM assistant"
      style={{
        position: 'fixed', right: 26, bottom: 26, zIndex: 60,
        width: 62, height: 62, borderRadius: '50%', cursor: 'pointer', border: 'none',
        background: 'linear-gradient(135deg, var(--afx-green-400), var(--afx-green-600))',
        boxShadow: '0 10px 28px rgba(42,87,52,0.34)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}
    >
      {!busy && <span className="alm-bubble-ring" />}
      <AlmMark size={32} state={phase} tone="white" id="bub" />
    </button>
  );
}

function SubLine({ phase }) {
  if (phase === 'thinking') return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      Thinking <span className="alm-think-dots"><span></span><span></span><span></span></span>
    </span>
  );
  if (phase === 'answering') return <span>Answering…</span>;
  if (phase === 'listening') return <span>Listening…</span>;
  return <span>Online · replies in seconds</span>;
}

function Panel() {
  const { open, phase, messages, draft, closeWidget, onDraft, ask, busy } = useAgent();
  const scrollRef = useRef(null);
  const inputRef = useRef(null);
  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, phase, open]);
  useEffect(() => { if (open && inputRef.current) inputRef.current.focus(); }, [open]);
  if (!open) return null;
  const isBusy = busy();

  return (
    <div className="alm-panel" style={{
      position: 'fixed', right: 26, bottom: 26, zIndex: 60,
      width: 380, maxWidth: 'calc(100vw - 32px)', height: 560, maxHeight: 'calc(100vh - 52px)',
      background: '#fff', borderRadius: 18, overflow: 'hidden',
      border: '1px solid var(--afx-gray-200)', boxShadow: '0 24px 60px rgba(5,7,8,0.22)',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 16px', background: 'linear-gradient(135deg, #0c2414, #061a0e)', color: '#fff' }}>
        <div style={{ width: 42, height: 42, borderRadius: 12, background: 'rgba(255,255,255,0.08)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <AlmMark size={26} state={phase} tone="white" id="pnl" />
        </div>
        <div style={{ flex: 1, lineHeight: 1.2 }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>ALM</div>
          <div style={{ fontSize: 12, opacity: 0.85 }}><SubLine phase={phase} /></div>
        </div>
        <button onClick={closeWidget} aria-label="Close" style={{ background: 'rgba(255,255,255,0.1)', border: 'none', color: '#fff', width: 30, height: 30, borderRadius: 8, cursor: 'pointer', fontSize: 18, lineHeight: 1 }}>×</button>
      </div>

      {/* messages */}
      <div ref={scrollRef} className="alm-scroll" style={{ flex: 1, overflowY: 'auto', padding: '18px 16px', background: 'var(--afx-gray-50)', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {messages.map((m, i) => (
          <div key={i} className="alm-msg" style={{ display: 'flex', justifyContent: m.role === 'user' ? 'flex-end' : 'flex-start' }}>
            <div style={{
              maxWidth: '82%', padding: '10px 13px', fontSize: 14, lineHeight: 1.5,
              fontFamily: 'var(--font-body)',
              borderRadius: m.role === 'user' ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
              background: m.role === 'user' ? 'var(--afx-green-500)' : '#fff',
              color: m.role === 'user' ? '#fff' : 'var(--afx-gray-700)',
              border: m.role === 'user' ? 'none' : '1px solid var(--afx-gray-200)',
              boxShadow: m.role === 'user' ? 'none' : '0 1px 2px rgba(5,7,8,0.04)',
            }}>{m.content || '\u200b'}</div>
          </div>
        ))}
        {phase === 'thinking' && (
          <div className="alm-msg" style={{ display: 'flex', justifyContent: 'flex-start' }}>
            <div style={{ padding: '12px 14px', background: '#fff', border: '1px solid var(--afx-gray-200)', borderRadius: '14px 14px 14px 4px', display: 'flex', alignItems: 'center', gap: 4 }}>
              <span className="alm-think-dots"><span></span><span></span><span></span></span>
            </div>
          </div>
        )}
        {messages.length <= 1 && (
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 4 }}>
            {SUGGESTIONS.map((s) => (
              <button key={s} className="alm-chip" onClick={() => ask(s)} style={{
                padding: '7px 12px', borderRadius: 999, fontSize: 13, fontFamily: 'var(--font-body)',
                background: '#fff', border: '1px solid var(--afx-gray-300)', color: 'var(--afx-green-700)', cursor: 'pointer',
              }}>{s}</button>
            ))}
          </div>
        )}
      </div>

      {/* input */}
      <form onSubmit={(e) => { e.preventDefault(); ask(); }} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: 12, borderTop: '1px solid var(--afx-gray-200)', background: '#fff' }}>
        <input
          ref={inputRef}
          value={draft}
          onChange={(e) => onDraft(e.target.value)}
          placeholder={isBusy ? 'ALM is responding…' : 'Ask about Afford-X…'}
          disabled={isBusy}
          style={{
            flex: 1, height: 42, padding: '0 14px', borderRadius: 999, fontSize: 14, fontFamily: 'var(--font-body)',
            border: '1.5px solid var(--afx-gray-200)', outline: 'none', color: 'var(--afx-ink)', background: 'var(--afx-gray-50)',
          }}
          onFocus={(e) => (e.target.style.borderColor = 'var(--afx-green-500)')}
          onBlur={(e) => (e.target.style.borderColor = 'var(--afx-gray-200)')}
        />
        <button type="submit" disabled={isBusy || !draft.trim()} aria-label="Send" style={{
          width: 42, height: 42, borderRadius: '50%', border: 'none', flexShrink: 0,
          cursor: isBusy || !draft.trim() ? 'default' : 'pointer',
          background: !draft.trim() || isBusy ? 'var(--afx-gray-200)' : 'var(--afx-green-500)',
          color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
          transition: 'background 0.15s ease',
        }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
        </button>
      </form>
    </div>
  );
}

function AgentWidget() {
  return <><Bubble /><Panel /></>;
}

Object.assign(window, { AgentProvider, useAgent, HeaderAgent, AgentWidget, AlmMark });
// Afford-X pricing page — follows the marketing theme + ALM agent.
const { Button, Badge, Card } = window.AffordXDesignSystem_998110;
const { AgentProvider, HeaderAgent, AgentWidget } = window;
const A = 'assets/';

const NAV = [
  { label: 'Product Highlights', href: '/' },
  { label: 'How Afford-X Works', href: '/' },
  { label: 'Blog', href: '/blog' },
  { label: 'Pricing', href: '/pricing' },
];

function SiteHeader() {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 30, background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--afx-gray-200)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px', height: 72, display: 'flex', alignItems: 'center', gap: 32 }}>
        <a href="/"><img src={A + 'logo.png'} alt="Afford-X" style={{ height: 30, display: 'block' }} /></a>
        <nav style={{ display: 'flex', gap: 28, marginLeft: 12 }}>
          {NAV.map((l) => {
            const active = l.label === 'Pricing';
            return <a key={l.label} href={l.href} style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 14, color: active ? 'var(--afx-green-700)' : 'var(--afx-gray-600)', textDecoration: 'none' }}>{l.label}</a>;
          })}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 12, alignItems: 'center' }}>
          <HeaderAgent />
          <Button variant="primary" size="sm">Contact us</Button>
        </div>
      </div>
    </header>
  );
}

function Check({ on = true }) {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={on ? 'currentColor' : 'var(--afx-gray-300)'} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}>
      {on ? <polyline points="20 6 9 17 4 12" /> : <line x1="6" y1="12" x2="18" y2="12" />}
    </svg>
  );
}

const PLANS = [
  {
    name: 'Free Segment', price: '$0', period: 'forever', kicker: 'Try it',
    blurb: 'One Afford-X segment to prove the lift, no card required.',
    cta: 'Try free segment', variant: 'secondary',
    features: [['1 Afford-X segment', true], ['Exclusion filter preview', true], ['Up to 50K MAIDs', true], ['Community support', true], ['Custom Dollar Scoring', false]],
  },
  {
    name: 'Growth', price: '$1,200', period: 'per month', kicker: 'For lean teams',
    blurb: 'Run real campaigns with the full exclusion filter.',
    cta: 'Start with Growth', variant: 'secondary',
    features: [['10 Afford-X segments', true], ['Full Exclusion Filter', true], ['Up to 5M MAIDs / mo', true], ['1 ad-account integration', true], ['Email support', true]],
  },
  {
    name: 'Scale', price: '$3,500', period: 'per month', kicker: 'Most popular', recommended: true,
    blurb: 'Multi-channel targeting with ALM tuned to your vertical.',
    cta: 'Choose Scale', variant: 'light',
    features: [['Unlimited segments', true], ['Custom Dollar Scoring', true], ['Up to 50M MAIDs / mo', true], ['5 ad-account integrations', true], ['Priority support + CSM', true]],
  },
  {
    name: 'Enterprise', price: 'Custom', period: "let's talk", kicker: 'At scale',
    blurb: 'Dedicated data feeds, SLAs and compliance review.',
    cta: 'Contact sales', variant: 'secondary',
    features: [['Everything in Scale', true], ['Unlimited MAIDs / HEMs', true], ['Bespoke data feeds', true], ['SSO + audit logs', true], ['GDPR / CCPA / LGPD review', true]],
  },
];

function PlanCard({ p, annual }) {
  const rec = p.recommended;
  const ink = rec ? '#fff' : 'var(--afx-ink)';
  const sub = rec ? 'rgba(255,255,255,0.82)' : 'var(--afx-gray-500)';
  const numeric = p.price.startsWith('$') && p.price !== '$0';
  let priceText = p.price;
  if (numeric && annual) {
    const n = Math.round(parseInt(p.price.replace(/[^0-9]/g, ''), 10) * 0.8);
    priceText = '$' + n.toLocaleString();
  }
  return (
    <div
      className={`px-card ${rec ? 'is-rec' : 'is-plain'}`}
      style={{
        position: 'relative', display: 'flex', flexDirection: 'column',
        background: rec ? 'var(--afx-green-500)' : '#fff',
        border: rec ? 'none' : '1px solid var(--afx-gray-200)',
        borderRadius: 16, padding: '26px 22px 24px',
        boxShadow: rec ? '0 18px 44px rgba(42,87,52,0.30)' : '0 1px 2px rgba(5,7,8,0.04)',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: rec ? 'rgba(255,255,255,0.9)' : 'var(--afx-green-600)' }}>{p.kicker}</span>
        {rec && <Badge tone="red" solid style={{ background: 'var(--afx-red-bright)' }}>Best value</Badge>}
      </div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 24, letterSpacing: '-0.02em', color: ink, margin: '0 0 6px' }}>{p.name}</h3>
      <p style={{ fontSize: 13.5, lineHeight: 1.5, color: sub, margin: '0 0 18px', minHeight: 40 }}>{p.blurb}</p>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 20 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 38, letterSpacing: '-0.03em', color: ink }}>{priceText}</span>
        <span style={{ fontSize: 13, color: sub }}>{numeric ? (annual ? '/ mo · billed yearly' : '/ ' + p.period) : p.period}</span>
      </div>
      {p.variant === 'light'
        ? <Button size="md" fullWidth style={{ background: '#fff', color: 'var(--afx-green-700)', border: 'none' }}>{p.cta}</Button>
        : <Button variant={p.variant} size="md" fullWidth>{p.cta}</Button>}
      <div style={{ height: 1, background: rec ? 'rgba(255,255,255,0.22)' : 'var(--afx-gray-200)', margin: '22px 0 18px' }} />
      <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
        {p.features.map(([f, on]) => (
          <li key={f} style={{ display: 'flex', gap: 9, fontSize: 13.5, lineHeight: 1.4, color: on ? (rec ? '#fff' : 'var(--afx-gray-700)') : 'var(--afx-gray-400)' }}>
            <span style={{ color: rec ? '#fff' : 'var(--afx-green-500)' }}><Check on={on} /></span>
            <span>{f}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function BillingToggle({ annual, setAnnual }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: 4, borderRadius: 999, background: 'var(--afx-gray-100)', border: '1px solid var(--afx-gray-200)' }}>
      {[['Monthly', false], ['Annual · save 20%', true]].map(([label, val]) => (
        <button key={label} onClick={() => setAnnual(val)} style={{
          border: 'none', cursor: 'pointer', height: 34, padding: '0 16px', borderRadius: 999,
          fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 13,
          background: annual === val ? '#fff' : 'transparent',
          color: annual === val ? 'var(--afx-green-700)' : 'var(--afx-gray-500)',
          boxShadow: annual === val ? '0 1px 3px rgba(5,7,8,0.10)' : 'none',
          transition: 'all 0.15s ease',
        }}>{label}</button>
      ))}
    </div>
  );
}

function Pricing() {
  const [annual, setAnnual] = React.useState(false);
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -140, left: '50%', transform: 'translateX(-50%)', width: 720, height: 480, background: 'radial-gradient(circle, rgba(84,169,102,0.14), transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '64px 28px 40px', textAlign: 'center', position: 'relative' }}>
        <span className="afx-eyebrow">Pricing</span>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 48, lineHeight: 1.08, letterSpacing: '-0.03em', color: 'var(--afx-ink)', margin: '14px 0 14px' }}>
          Plans that scale with your spend<span style={{ color: 'var(--afx-red-bright)' }}>.</span>
        </h1>
        <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--afx-gray-600)', maxWidth: 560, margin: '0 auto 26px' }}>
          Every plan runs on the Affordability Language Model and the first-in-market Exclusion Filter. Start free, upgrade when the lift shows up.
        </p>
        <BillingToggle annual={annual} setAnnual={setAnnual} />
      </div>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 28px 24px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, alignItems: 'start' }}>
        {PLANS.map((p) => <PlanCard key={p.name} p={p} annual={annual} />)}
      </div>
      <p style={{ textAlign: 'center', fontSize: 13, color: 'var(--afx-gray-500)', margin: '8px 0 0' }}>
        Placeholder pricing shown for presentation. All plans include GDPR / CCPA / LGPD-compliant, consented signals.
      </p>
    </section>
  );
}

function FaqStrip() {
  const faqs = [
    ['What counts as a MAID?', 'A mobile ad ID or hashed email in your matched audience — we score each against the Dollar Scoring Framework.'],
    ['Can I switch plans anytime?', 'Yes. Upgrade, downgrade or pause monthly; annual plans prorate at renewal.'],
    ['Is my data shared?', 'No. Signals are consented and pseudonymized, and we never resell your campaign data.'],
    ['How fast can I launch?', 'Most teams ship their first exclusion-filtered segment the same day they connect an ad account.'],
  ];
  return (
    <section style={{ background: 'var(--afx-gray-50)', borderTop: '1px solid var(--afx-gray-200)', borderBottom: '1px solid var(--afx-gray-200)', marginTop: 56 }}>
      <div style={{ maxWidth: 980, margin: '0 auto', padding: '56px 28px' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em', color: 'var(--afx-ink)', textAlign: 'center', margin: '0 0 32px' }}>Pricing questions, answered</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
          {faqs.map(([q, a]) => (
            <Card key={q} variant="default" style={{ padding: 22 }}>
              <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, color: 'var(--afx-ink)', margin: '0 0 8px' }}>{q}</h4>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--afx-gray-600)', margin: 0 }}>{a}</p>
            </Card>
          ))}
        </div>
        <p style={{ textAlign: 'center', marginTop: 28, fontSize: 15, color: 'var(--afx-gray-600)' }}>
          Still deciding? <strong style={{ color: 'var(--afx-ink)' }}>Ask ALM</strong> in the corner — it can recommend a plan for your campaign.
        </p>
      </div>
    </section>
  );
}

function CtaBand() {
  return (
    <section style={{ background: 'var(--afx-green-500)' }}>
      <div style={{ maxWidth: 1000, margin: '0 auto', padding: '60px 28px', textAlign: 'center', color: '#fff' }}>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 36, letterSpacing: '-0.02em', margin: '0 0 12px', color: '#fff' }}>Affordability Makes Intent Better</h2>
        <p style={{ fontSize: 17, opacity: 0.95, margin: '0 0 26px' }}>Your efficiency accelerator — because real buyers drive real results.</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
          <Button variant="danger" size="lg">Free Evaluation</Button>
          <Button variant="secondary" size="lg" style={{ background: 'rgba(255,255,255,0.12)', borderColor: '#fff', color: '#fff' }}>Contact us</Button>
        </div>
      </div>
    </section>
  );
}

function SiteFooter() {
  return (
    <footer style={{ background: 'var(--afx-black)', color: 'var(--afx-gray-400)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '48px 28px', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <div style={{ background: '#fff', borderRadius: 'var(--radius-md)', padding: '12px 18px' }}><img src={A + 'logo.png'} alt="Afford-X" style={{ height: 26, display: 'block' }} /></div>
        <div style={{ display: 'flex', gap: 24, fontFamily: 'var(--font-display)', fontSize: 14 }}>
          {['Product Highlights', 'How Afford-X Works', 'Terms & Conditions', 'Privacy Policy'].map((l) => <a key={l} href="#" style={{ color: 'var(--afx-gray-400)', textDecoration: 'none' }}>{l}</a>)}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span style={{ fontSize: 13 }}>Find us on</span>
          <span style={{ width: 34, height: 34, borderRadius: 'var(--radius-sm)', background: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
            <img src={A + 'linkedin.svg'} alt="LinkedIn" style={{ width: 18, height: 18 }} />
          </span>
        </div>
      </div>
    </footer>
  );
}

function SitePricing() {
  return (
    <AgentProvider>
      <div style={{ background: '#fff' }}>
        <SiteHeader /><Pricing /><FaqStrip /><CtaBand /><SiteFooter />
      </div>
      <AgentWidget />
    </AgentProvider>
  );
}

Object.assign(window, { SitePricing });

// auto-render
document.body.innerHTML = '<div id="afx-root"></div>';
ReactDOM.createRoot(document.getElementById('afx-root')).render(<window.SitePricing />);