// lp-close.jsx — Sections S7–S10, FAQ, Footer

// ── S7: Differentiation ───────────────────────────────────────────
function SectionDiff() {
  const s = {
    section: { background: '#ffffff', padding: '96px var(--ci-container-pad)' },
    inner: { maxWidth: '1180px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '48px' },
    header: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '12px' },
    eyebrow: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.14em', color: '#64748b' },
    h2: { fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: '500', letterSpacing: '-0.4px', color: '#0f172a', margin: 0, lineHeight: 1.2, textWrap: 'pretty' },
    table: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr', gap: '12px' },
    col: (active) => ({
      background: active ? '#0f172a' : '#f8f9fb',
      border: `1px solid ${active ? '#1e293b' : '#e2e8f0'}`,
      borderRadius: 'calc(var(--ci-radius) * 2)',
      padding: '28px 24px',
      display: 'flex', flexDirection: 'column', gap: '14px',
    }),
    colLabel: (active) => ({ fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.12em', color: active ? '#8b82ff' : '#94a3b8' }),
    colTitle: (active) => ({ fontSize: '16px', fontWeight: '600', color: active ? '#f4f1ff' : '#0f172a', letterSpacing: '-0.2px' }),
    colDesc: (active) => ({ fontSize: '13px', color: active ? '#a098c5' : '#64748b', lineHeight: 1.6 }),
    check: (active) => ({ display: 'flex', alignItems: 'flex-start', gap: '8px', fontSize: '12px', color: active ? '#7be7c4' : '#64748b', lineHeight: 1.5 }),
    cross: { display: 'flex', alignItems: 'flex-start', gap: '8px', fontSize: '12px', color: '#94a3b8', lineHeight: 1.5 },
    checkMark: { flexShrink: 0, marginTop: '2px' },
  };

  const cols = [
    {
      label: 'Resume builders', title: 'Documents', active: false,
      desc: 'Polish the artifact. Miss the human layer.',
      items: [
        { text: 'Format and presentation', have: true },
        { text: 'Relationship context', have: false },
        { text: 'Conversation memory', have: false },
        { text: 'Follow-up tracking', have: false },
      ],
    },
    {
      label: 'Spreadsheets', title: 'Lists', active: false,
      desc: 'Track rows. Lose the context between them.',
      items: [
        { text: 'Application rows', have: true },
        { text: 'Relationship context', have: false },
        { text: 'Conversation memory', have: false },
        { text: 'Next action prompts', have: false },
      ],
    },
    {
      label: 'Sales CRMs', title: 'Pipelines', active: false,
      desc: 'Built for volume. Overwhelming for depth.',
      items: [
        { text: 'Contact management', have: true },
        { text: 'Career-specific context', have: false },
        { text: 'Private by default', have: false },
        { text: 'Designed for one search', have: false },
      ],
    },
    {
      label: 'ContextualIntel', title: 'Relationship context', active: true,
      desc: 'The human context behind every serious move.',
      items: [
        { text: 'Application + people linked', have: true },
        { text: 'Conversation memory', have: true },
        { text: 'Next actions from context', have: true },
        { text: 'Private by default', have: true },
      ],
    },
  ];

  return (
    <section style={s.section}>
      <div style={s.inner}>
        <div style={s.header} className="fade-in">
          <p style={s.eyebrow}>Differentiation</p>
          <h2 style={s.h2}>Not another resume template. Not a public networking profile.</h2>
        </div>
        <div style={s.table} className="ci-stagger">
          {cols.map(col => (
            <div key={col.label} style={s.col(col.active)} className={col.active ? 'ci-card ci-card-dark' : 'ci-card'}>
              <p style={s.colLabel(col.active)}>{col.label}</p>
              <p style={s.colTitle(col.active)}>{col.title}</p>
              <p style={s.colDesc(col.active)}>{col.desc}</p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginTop: '4px' }}>
                {col.items.map((item, i) => (
                  <div key={i} style={item.have ? s.check(col.active) : s.cross}>
                    <span style={s.checkMark}>{item.have ? '▲' : '▼'}</span>
                    <span>{item.text}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── S8: Privacy ────────────────────────────────────────────────────
function SectionPrivacy({ showPrivacyDetails }) {
  const s = {
    section: { background: '#f8f9fb', padding: '96px var(--ci-container-pad)' },
    inner: { maxWidth: '900px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '40px', alignItems: 'center', textAlign: 'center' },
    eyebrow: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.14em', color: '#64748b' },
    h2: { fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: '500', letterSpacing: '-0.4px', color: '#0f172a', margin: 0, lineHeight: 1.2, textWrap: 'pretty' },
    body: { fontSize: '17px', color: '#475569', lineHeight: 1.75, margin: 0, textWrap: 'pretty' },
    chips: { display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' },
    chip: { display: 'inline-flex', alignItems: 'center', height: '32px', padding: '0 14px', background: '#ffffff', border: '1px solid #e2e8f0', borderRadius: 'var(--ci-radius)', fontSize: '12px', fontWeight: '500', color: '#334155' },
  };

  const privateItems = ['Applications', 'Compensation notes', 'Interview feedback', 'Relationship history', 'Outreach drafts', 'Journal entries'];

  return (
    <section style={s.section} id="privacy">
      <div style={s.inner} className="fade-in">
        <p style={s.eyebrow}>Privacy</p>
        <h2 style={s.h2}>Private by default because career context is sensitive.</h2>
        <p style={s.body}>
          Your workspace is not a social feed or a public profile. Everything you track — conversations, compensation context, interview notes, relationship history — stays in a private workspace built for you alone.
        </p>
        {showPrivacyDetails && (
          <div style={s.chips}>
            {privateItems.map((item, index) => (
              <span
                key={item}
                className="privacy-chip"
                style={{ ...s.chip, animationDelay: `${index * 0.14}s` }}
              >
                {item}
              </span>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// ── S9: Pricing / Beta Stub ────────────────────────────────────────
function SectionPricing({ ctaCopy }) {
  const [form, setForm] = React.useState({
    fullName: '',
    email: '',
    useCase: '',
    website: '',
  });
  const [submissionStatus, setSubmissionStatus] = React.useState('idle');
  const [formError, setFormError] = React.useState('');

  const s = {
    section: { background: '#16132e', padding: '96px var(--ci-container-pad)' },
    inner: { maxWidth: '600px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '40px', alignItems: 'center', textAlign: 'center' },
    betaBadge: { display: 'inline-flex', alignItems: 'center', height: '24px', padding: '0 12px', background: 'color-mix(in srgb, #8b82ff 14%, transparent)', color: '#8b82ff', border: '1px solid color-mix(in srgb, #8b82ff 25%, transparent)', borderRadius: 'var(--ci-radius)', fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.1em' },
    eyebrow: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.14em', color: '#a098c5' },
    h2: { fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: '500', letterSpacing: '-0.4px', color: '#f4f1ff', margin: 0, lineHeight: 1.2, textWrap: 'pretty' },
    card: { background: '#221d42', border: '1px solid #8a80d224', borderRadius: 'calc(var(--ci-radius) * 2)', padding: '36px 40px', display: 'flex', flexDirection: 'column', gap: '24px', width: '100%' },
    planName: { fontSize: '12px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#8b82ff' },
    price: { fontSize: '36px', fontWeight: '500', color: '#f4f1ff', letterSpacing: '-0.8px' },
    priceSub: { fontSize: '13px', color: '#a098c5', marginTop: '4px' },
    features: { display: 'flex', flexDirection: 'column', gap: '10px', textAlign: 'left' },
    feature: { display: 'flex', alignItems: 'flex-start', gap: '10px', fontSize: '13px', color: '#f4f1ff', lineHeight: 1.5 },
    featureDot: { width: '5px', height: '5px', borderRadius: '50%', background: '#8b82ff', marginTop: '6px', flexShrink: 0 },
    divider: { height: '1px', background: '#8a80d224' },
    note: { fontSize: '12px', color: '#a098c5', lineHeight: 1.6 },
    form: { display: 'flex', flexDirection: 'column', gap: '14px', textAlign: 'left' },
    fieldGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '12px' },
    label: { display: 'flex', flexDirection: 'column', gap: '6px', fontSize: '12px', color: '#a098c5', lineHeight: 1.4 },
    labelFull: { display: 'flex', flexDirection: 'column', gap: '6px', fontSize: '12px', color: '#a098c5', lineHeight: 1.4, gridColumn: '1 / -1' },
    input: { width: '100%', minWidth: 0, height: '42px', border: '1px solid #8a80d224', borderRadius: 'var(--ci-radius)', background: '#16132e', color: '#f4f1ff', padding: '0 12px', fontSize: '14px', fontFamily: 'var(--ci-font-sans)', outline: 'none' },
    textarea: { width: '100%', minWidth: 0, minHeight: '92px', resize: 'vertical', border: '1px solid #8a80d224', borderRadius: 'var(--ci-radius)', background: '#16132e', color: '#f4f1ff', padding: '11px 12px', fontSize: '14px', fontFamily: 'var(--ci-font-sans)', lineHeight: 1.5, outline: 'none' },
    hiddenField: { display: 'none' },
    btn: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', minHeight: '48px', padding: '0 28px', background: '#8b82ff', color: '#16132e', border: 'none', borderRadius: 'var(--ci-radius)', fontSize: '15px', fontWeight: '500', cursor: 'pointer', fontFamily: 'var(--ci-font-sans)', textDecoration: 'none', width: '100%', transition: 'opacity 120ms ease' },
    btnDisabled: { opacity: 0.62, cursor: 'not-allowed' },
    formMessage: { borderRadius: 'var(--ci-radius)', padding: '10px 12px', fontSize: '12px', lineHeight: 1.5, textAlign: 'left' },
    success: { border: '1px solid rgba(123, 231, 196, 0.35)', background: 'rgba(123, 231, 196, 0.1)', color: '#7be7c4' },
    error: { border: '1px solid rgba(255, 138, 138, 0.35)', background: 'rgba(255, 138, 138, 0.1)', color: '#ffb4b4' },
  };

  const included = ['Application tracking + context', 'Journal and conversation memory', 'People + relationship mapping', 'Follow-up and outreach tools', 'Private workspace — no public profile'];
  const submitting = submissionStatus === 'submitting';

  const setField = (field, value) => {
    setForm(current => ({ ...current, [field]: value }));
    if (formError) setFormError('');
  };

  const submitRequest = async (event) => {
    event.preventDefault();
    if (submitting) return;

    const fullName = form.fullName.trim();
    const email = form.email.trim();
    if (!fullName || !email) {
      setSubmissionStatus('idle');
      setFormError('Add your name and email so we can review the request.');
      return;
    }

    setSubmissionStatus('submitting');
    setFormError('');

    try {
      const response = await fetch('/api/trial-access/requests', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({
          fullName,
          email,
          useCase: form.useCase,
          website: form.website,
          sourcePath: `${window.location.pathname}${window.location.hash || ''}`,
        }),
      });

      if (!response.ok) throw new Error('request_failed');

      setSubmissionStatus('success');
      setForm({
        fullName: '',
        email: '',
        useCase: '',
        website: '',
      });
    } catch {
      setSubmissionStatus('idle');
      setFormError('Request could not be submitted right now. Try again in a moment.');
    }
  };

  return (
    <section style={s.section} id="pricing">
      <div style={s.inner} className="fade-in">
        <span style={s.betaBadge}>Private Beta</span>
        <h2 style={s.h2}>Simple private beta access while the workflow is being shaped.</h2>
        <div style={s.card} className="ci-card ci-card-dark">
          <div>
            <div style={s.planName}>Beta access</div>
            <div style={s.price}>Coming soon</div>
            <div style={s.priceSub}>Join the private beta while slots are reviewed</div>
          </div>
          <div style={s.divider}></div>
          <div style={s.features}>
            {included.map(f => (
              <div key={f} style={s.feature}>
                <div style={s.featureDot}></div>
                <span>{f}</span>
              </div>
            ))}
          </div>
          <form id="trial-access" style={s.form} onSubmit={submitRequest}>
            <div style={s.fieldGrid}>
              <label style={s.label}>
                Name
                <input
                  style={s.input}
                  value={form.fullName}
                  onChange={e => setField('fullName', e.target.value)}
                  autoComplete="name"
                  required
                />
              </label>
              <label style={s.label}>
                Email
                <input
                  style={s.input}
                  value={form.email}
                  onChange={e => setField('email', e.target.value)}
                  autoComplete="email"
                  type="email"
                  required
                />
              </label>
              <label style={s.labelFull}>
                What is the hardest part of your job search right now?
                <textarea
                  style={s.textarea}
                  value={form.useCase}
                  onChange={e => setField('useCase', e.target.value)}
                  placeholder="Finding the right roles, keeping applications organized, networking follow-ups, interview prep..."
                />
              </label>
              <label style={s.hiddenField} aria-hidden="true">
                Website
                <input
                  tabIndex="-1"
                  autoComplete="off"
                  value={form.website}
                  onChange={e => setField('website', e.target.value)}
                />
              </label>
            </div>

            {submissionStatus === 'success' && (
              <div style={{ ...s.formMessage, ...s.success }} role="status">
                Request received. We will review trial access and follow up with next steps.
              </div>
            )}
            {formError && (
              <div style={{ ...s.formMessage, ...s.error }} role="alert">
                {formError}
              </div>
            )}

            <button
              type="submit"
              disabled={submitting}
              className="ci-cta"
              style={{ ...s.btn, ...(submitting ? s.btnDisabled : {}) }}
              onMouseEnter={e => { if (!submitting) e.currentTarget.style.opacity = '0.88'; }}
              onMouseLeave={e => { e.currentTarget.style.opacity = '1'; }}
            >
              {submitting ? 'Submitting request...' : `${ctaCopy} →`}
            </button>
          </form>
          <p style={s.note}>For professionals in an active or near-term career search. Trial access is by request while pricing is finalized.</p>
        </div>
      </div>
    </section>
  );
}

// ── S10: FAQ ───────────────────────────────────────────────────────
function SectionFAQ() {
  const [open, setOpen] = React.useState(null);

  const s = {
    section: { background: '#ffffff', padding: '96px var(--ci-container-pad)' },
    inner: { maxWidth: '720px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '48px' },
    header: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '12px' },
    eyebrow: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.14em', color: '#64748b' },
    h2: { fontSize: 'clamp(24px, 2.5vw, 36px)', fontWeight: '500', letterSpacing: '-0.3px', color: '#0f172a', margin: 0, lineHeight: 1.25 },
    list: { display: 'flex', flexDirection: 'column', gap: '0' },
    item: { borderTop: '1px solid #e2e8f0' },
    q: (isOpen) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '20px 0', cursor: 'pointer', gap: '16px', background: 'none', border: 'none', width: '100%', textAlign: 'left', fontFamily: 'var(--ci-font-sans)' }),
    qText: { fontSize: '15px', fontWeight: '500', color: '#0f172a', lineHeight: 1.4 },
    qArrow: (isOpen) => ({ fontSize: '14px', color: '#94a3b8', flexShrink: 0, transition: 'transform 200ms ease', transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)', display: 'inline-block' }),
    a: { fontSize: '14px', color: '#475569', lineHeight: 1.75, paddingBottom: '20px', margin: 0, overflow: 'hidden' },
    lastBorder: { borderBottom: '1px solid #e2e8f0' },
  };

  const faqs = [
    {
      q: 'Is this a resume builder?',
      a: 'No. ContextualIntel is designed for the relationship and context layer around a serious search. Resume tools help create documents; ContextualIntel helps track the people, notes, follow-ups, and opportunity context behind those documents.',
    },
    {
      q: 'Is this a sales CRM?',
      a: 'No. Sales CRMs are built for volume — managing large pipelines of prospects. ContextualIntel is built for depth: one active career move, with all the relationship context, conversation memory, and follow-up intelligence that makes it move forward.',
    },
    {
      q: 'Who is this built for?',
      a: 'Experienced professionals — Director+, VP, C-suite — who are in an active or near-term career move and whose next role will most likely come through a conversation, not a job board application.',
    },
    {
      q: 'Is my data private?',
      a: 'Yes, fully. Your workspace is not a social feed, not a public profile, and not connected to any network. Applications, compensation context, interview notes, and relationship history are private by default.',
    },
    {
      q: 'What does beta access include?',
      a: 'Full access to application tracking, journal and conversation memory, people and relationship mapping, outreach tools, and follow-up tracking. Pricing is to be determined after the beta period.',
    },
  ];

  return (
    <section style={s.section} id="faq">
      <div style={s.inner}>
        <div style={s.header} className="fade-in">
          <p style={s.eyebrow}>FAQ</p>
          <h2 style={s.h2}>Common questions.</h2>
        </div>
        <div style={s.list} className="fade-in">
          {faqs.map((faq, i) => (
            <div key={i} style={{ ...s.item, ...(i === faqs.length - 1 ? s.lastBorder : {}) }}>
              <button style={s.q(open === i)} className="ci-faq-q" onClick={() => setOpen(open === i ? null : i)}>
                <span style={s.qText}>{faq.q}</span>
                <span style={s.qArrow(open === i)}>▼</span>
              </button>
              <div className="ci-faq-ans" data-open={open === i}>
                <div style={{ overflow: 'hidden' }}>
                  <p style={s.a}>{faq.a}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────────────────────────────────────
function LPFooter({ ctaCopy }) {
  const s = {
    cta: { background: '#16132e', padding: '96px var(--ci-container-pad)', borderTop: '1px solid #8a80d224' },
    ctaInner: { maxWidth: '600px', margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '24px', alignItems: 'center' },
    ctaH2: { fontSize: 'clamp(28px, 3.5vw, 44px)', fontWeight: '500', letterSpacing: '-0.5px', color: '#f4f1ff', margin: 0, lineHeight: 1.2, textWrap: 'pretty' },
    ctaSub: { fontSize: '16px', color: '#a098c5', lineHeight: 1.65, margin: 0 },
    btn: { display: 'inline-flex', alignItems: 'center', height: '48px', padding: '0 28px', background: '#8b82ff', color: '#16132e', border: 'none', borderRadius: 'var(--ci-radius)', fontSize: '15px', fontWeight: '500', cursor: 'pointer', fontFamily: 'var(--ci-font-sans)', textDecoration: 'none', transition: 'opacity 120ms ease' },
    footer: { background: '#16132e', padding: '40px var(--ci-container-pad)', borderTop: '1px solid #8a80d224' },
    footerInner: { maxWidth: '1180px', margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '16px' },
    logo: { fontSize: '14px', fontWeight: '600', color: '#f4f1ff', letterSpacing: '-0.2px', textDecoration: 'none' },
    logoAccent: { color: '#8b82ff' },
    links: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '24px' },
    link: { fontSize: '12px', color: '#a098c5', textDecoration: 'none' },
    socialGroup: { display: 'inline-flex', alignItems: 'center', gap: '10px' },
    socialLabel: { fontSize: '12px', color: '#a098c5' },
    socialLinks: { display: 'inline-flex', alignItems: 'center', gap: '8px' },
    linkedinLink: { width: '34px', height: '34px', borderRadius: '6px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: '#f4f1ff', color: '#0c0a18', textDecoration: 'none', boxShadow: 'inset 0 0 0 1px rgba(244, 241, 255, 0.16)', transition: 'transform 160ms ease, opacity 120ms ease' },
    linkedinIcon: { width: '18px', height: '18px', display: 'block' },
    xLink: { width: '34px', height: '34px', borderRadius: '6px', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: '#f4f1ff', color: '#0c0a18', textDecoration: 'none', boxShadow: 'inset 0 0 0 1px rgba(244, 241, 255, 0.16)', transition: 'transform 160ms ease, opacity 120ms ease' },
    xIcon: { width: '15px', height: '15px', display: 'block' },
    copy: { fontSize: '12px', color: '#a098c5' },
  };

  return (
    <>
      <section style={s.cta}>
        <div style={s.ctaInner} className="fade-in">
          <h2 style={s.ctaH2}>Your next move is already in your network.</h2>
          <p style={s.ctaSub}>Start tracking the relationships, conversations, and follow-ups that move a serious search forward.</p>
          <a href="#trial-access" style={s.btn} className="ci-cta"
            onMouseEnter={e => e.currentTarget.style.opacity = '0.88'}
            onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
            {ctaCopy} →
          </a>
        </div>
      </section>
      <footer style={s.footer}>
        <div style={s.footerInner}>
          <a href="#" style={s.logo} aria-label="ContextualIntel home"><img src="/landing-v5/handoff/ci-logo.svg" alt="ContextualIntel" style={{ height: '30px', width: 'auto', display: 'block' }} /></a>
          <div style={s.links}>
            <a href="#privacy" style={s.link}>Privacy</a>
            <a href="#faq" style={s.link}>FAQ</a>
            <a href="https://crm.contextualintel.com/sign-in" style={s.link}>Sign in</a>
            <div style={s.socialGroup}>
              <span style={s.socialLabel}>Follow us</span>
              <span style={s.socialLinks}>
                <a
                  href="https://www.linkedin.com/company/contextual-intel"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Follow ContextualIntel on LinkedIn"
                  title="Follow ContextualIntel on LinkedIn"
                  style={s.linkedinLink}
                  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.opacity = '0.9'; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.opacity = '1'; }}
                >
                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" style={s.linkedinIcon}>
                    <path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.049c.476-.9 1.637-1.85 3.368-1.85 3.602 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.063 2.063 0 1 1 0-4.126 2.063 2.063 0 0 1 0 4.126zM7.119 20.452H3.554V9h3.565v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.728v20.543C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.728C24 .774 23.2 0 22.222 0h.003z" />
                  </svg>
                </a>
                <a
                  href="https://x.com/contextualint"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Follow ContextualIntel on X at contextualint"
                  title="Follow ContextualIntel on X"
                  style={s.xLink}
                  onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-1px)'; e.currentTarget.style.opacity = '0.9'; }}
                  onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.opacity = '1'; }}
                >
                  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false" style={s.xIcon}>
                    <path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817-5.965 6.817H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.451-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z" />
                  </svg>
                </a>
              </span>
            </div>
          </div>
          <span style={s.copy}>© 2026 ContextualIntel</span>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, { SectionDiff, SectionPrivacy, SectionPricing, SectionFAQ, LPFooter });