// influrep-sections.jsx — InfluRep landing (audience-centric rebuild).
// Thesis: match creators to a DIGITAL TWIN of the client's real buyers —
// not a generic age-and-country filter. Pillars: the twin · honesty
// (MEASURED vs MODELED on every number) · coverage (the platforms others skip,
// LinkedIn = the B2B wedge). The honesty IS the brand. Accent: amber (dt token).
//
// CTAs: login / free-trial / sign-up / pricing → suite.influrep.com/login (the
// GMR-suite app, NOT the legacy app.influrep.com). "Book a demo" / "Talk to
// sales" / "Enterprise" → #contact, which opens the Cellie AE chat (see index.html).

const SUITE = 'https://suite.influrep.com/login';

const ECO_ORDER = ['brynx', 'dtwin', 'marketear', 'crewrev', 'influrep', 'geoky', 'klenux'];

// ---- Lucide-style line icons (no emoji, no platform logos as art) ----
function Icon({ name, size = 20, stroke = 1.6, style = {} }) {
  const p = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round',
    style,
  };
  switch (name) {
    case 'users':       return <svg {...p}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>;
    case 'target':      return <svg {...p}><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>;
    case 'scan':        return <svg {...p}><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 12h10"/></svg>;
    case 'ruler':       return <svg {...p}><path d="M21.3 8.7 8.7 21.3a1 1 0 0 1-1.4 0l-4.6-4.6a1 1 0 0 1 0-1.4L15.3 2.7a1 1 0 0 1 1.4 0l4.6 4.6a1 1 0 0 1 0 1.4Z"/><path d="m7.5 10.5 2 2"/><path d="m10.5 7.5 2 2"/><path d="m13.5 4.5 2 2"/><path d="m4.5 13.5 2 2"/></svg>;
    case 'message':     return <svg {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
    case 'shield':      return <svg {...p}><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg>;
    case 'eye':         return <svg {...p}><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'send':        return <svg {...p}><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>;
    case 'search':      return <svg {...p}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>;
    case 'list':        return <svg {...p}><path d="M3 5h.01M3 12h.01M3 19h.01M8 5h13M8 12h13M8 19h13"/></svg>;
    case 'arrow':       return <svg {...p}><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>;
    case 'x':           return <svg {...p}><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>;
    case 'check':       return <svg {...p}><path d="M20 6 9 17l-5-5"/></svg>;
    default:            return null;
  }
}

// ---- MEASURED / MODELED badge — the signature trust motif ----
function MMBadge({ kind, children }) {
  return (
    <span className={`mm-badge ${kind}`}>
      <span className="mm-dot"/>
      {children || (kind === 'measured' ? 'Measured' : 'Modeled')}
    </span>
  );
}

// ---- Logo ----
function IrLogo({ size = 'm' }) {
  const heights = { s: 18, m: 22, l: 28, xl: 40 };
  return (
    <a href="#top" className="bx-mark" aria-label="InfluRep — home">
      <img src={LOGO_FILES.influrep} alt="InfluRep" style={{ height: heights[size], width: 'auto', display: 'block' }}/>
    </a>
  );
}

// ============================================================
// 0 · HEADER
// ============================================================
function IrHeader() {
  return (
    <header className="linear-header">
      <div className="container">
        <IrLogo />
        <nav>
          <a href="#twin">The digital twin</a>
          <a href="#honesty">Honesty</a>
          <a href="#coverage">Coverage</a>
          <a href={SUITE} className="btn-x brand">Try it free <span className="arrow">→</span></a>
        </nav>
      </div>
    </header>
  );
}

// ============================================================
// 1 · HERO — the twin thesis, as a visual
// ============================================================
function IrHero() {
  return (
    <section id="top" style={{ position: 'relative', paddingTop: 80, paddingBottom: 96, overflow: 'hidden' }}>
      <div className="ambient"/>
      <div className="container layer" style={{ paddingTop: 56 }}>
        <div className="hero-grid">
          <div className="col gap-6">
            <span className="pill-x brand reveal" style={{ alignSelf: 'flex-start' }}>
              <span className="dot"/> Audience-first creator matching
            </span>

            <h1 className="t-display reveal">
              Match creators to your<br/>
              real customers.<br/>
              <span className="muted">Not a generic demographic.</span>
            </h1>

            <p className="t-lead reveal" style={{ maxWidth: 580 }}>
              InfluRep builds a digital-twin panel of your actual buyers, then scores every creator on how well they speak to those exact people — with measured-vs-modeled honesty on every number.
            </p>

            <div className="col gap-3 reveal" style={{ marginTop: 8 }}>
              <div className="row gap-3" style={{ flexWrap: 'wrap' }}>
                <a href={SUITE} className="btn-x brand">Try it free <span className="arrow">→</span></a>
                <a href="#contact" className="btn-x">Book a demo</a>
              </div>
              <span className="cta-microcopy">
                Every number labeled <strong style={{ color: 'var(--bx-blue)' }}>measured</strong> or <strong style={{ color: 'var(--text-2)' }}>modeled</strong><span className="sep">·</span>We never sell you a number that doesn't match reality
              </span>
            </div>
          </div>

          <div className="reveal">
            <TwinMatchVisual />
          </div>
        </div>
      </div>
    </section>
  );
}

// Hero centerpiece — brief → twin panel → 3-axis match vs your twins.
function TwinMatchVisual() {
  const axes = [
    { label: 'Values',              val: 71, kind: 'modeled',  w: '71%' },
    { label: 'Reach + Engagement',  val: 88, kind: 'measured', w: '88%' },
    { label: 'Audience fit',        val: 64, kind: 'modeled',  w: '64%' },
  ];
  return (
    <div className="report-preview twin-visual" aria-hidden="true">
      <div className="report-chrome">
        <span className="filename">
          <span className="ext">MATCH</span>
          @creator-handle vs your twins
        </span>
        <span className="status">Scored</span>
      </div>

      {/* Step 1 · the brief */}
      <div className="tv-brief">
        <Icon name="target" size={14}/>
        <span>Brand brief · premium skincare · women 28–45 · clean-beauty values</span>
      </div>

      {/* Step 2 · the twin panel */}
      <div className="tv-panel-h">
        <span>Your digital-twin panel</span>
        <MMBadge kind="modeled">Modeled from your buyers</MMBadge>
      </div>
      <div className="tv-panel">
        {Array.from({ length: 12 }).map((_, i) => (
          <span key={i} className={`tv-twin ${[2, 5, 6, 9].includes(i) ? 'hi' : ''}`}>
            <Icon name="users" size={13}/>
          </span>
        ))}
      </div>

      {/* Step 3 · 3-axis match + fit ring */}
      <div className="tv-match">
        <div className="tv-axes">
          {axes.map(a => (
            <div key={a.label} className="tv-axis">
              <div className="tv-axis-top">
                <span className="tv-axis-label">{a.label}</span>
                <MMBadge kind={a.kind}/>
              </div>
              <div className="tv-axis-track"><span className="tv-axis-fill" style={{ width: a.w }}/></div>
            </div>
          ))}
        </div>

        <div className="tv-ring" style={{ '--pct': '74' }}>
          <div className="tv-ring-inner">
            <span className="tv-ring-num">74</span>
            <span className="tv-ring-lbl">twin-fit</span>
          </div>
        </div>
      </div>

      <div className="report-foot">
        <span className="pages">scored vs your customers</span>
        <span>influrep · measured + modeled</span>
      </div>
    </div>
  );
}

// ============================================================
// 2 · THE WOUNDS — the dirty secret of creator tools
// ============================================================
function IrProblem() {
  const items = [
    {
      n: '01', tag: "The numbers don't match reality",
      body: 'A leading fraud-detection tool rated influencers who bought followers as authentic — and flagged the real ones as fake.',
      answer: 'We never fake a number. Every metric is badged measured or modeled.',
    },
    {
      n: '02', tag: 'It surfaces generic, irrelevant creators',
      body: 'Keyword and age-and-country filters hand you the wrong people, dressed up as a match.',
      answer: 'We match creators to a digital twin of your real buyers — not a demographic.',
    },
    {
      n: '03', tag: 'They lock you in',
      body: '12-month contracts, no refunds, rigid credits you have to burn before they expire.',
      answer: 'Pay per study. No contract. Scale when you want, stop when you want.',
    },
  ];
  return (
    <section className="linear-section" id="wounds">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="01">The dirty secret of creator tools</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Three things you already hate<br/>
          <span className="muted">about your current tool.</span>
        </h2>

        <div className="wounds-list reveal-stagger" style={{ marginTop: 16 }}>
          {items.map(it => (
            <div key={it.n} className="wound-row">
              <div className="wound-num">{it.n}</div>
              <div className="wound-main">
                <h3 className="wound-tag">{it.tag}</h3>
                <p className="wound-body">{it.body}</p>
              </div>
              <div className="wound-answer">
                <span className="wound-answer-label"><Icon name="arrow" size={13}/> Our answer</span>
                <p className="wound-answer-body">{it.answer}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 3 · THE DIGITAL TWIN — centerpiece
// ============================================================
function IrTwin() {
  const steps = [
    { n: '01', icon: 'target', name: 'Brief your brand.', desc: 'Tell us your brand and your real customers — the people you actually sell to.' },
    { n: '02', icon: 'users',  name: 'We build the twin.', desc: 'A digital-twin consumer panel: a modeled replica of your buyers, segment by segment.' },
    { n: '03', icon: 'ruler',  name: 'Every creator, scored.', desc: 'Each creator is scored on three axes — against your twins, not a generic filter.' },
  ];
  const axes = [
    { name: 'Values',             desc: 'Does what they stand for align with your brand and your buyers?' },
    { name: 'Reach + Engagement', desc: 'How many of the right people they reach, and how those people respond.' },
    { name: 'Audience fit',       desc: "How closely their engaged audience resembles your twin panel." },
  ];
  return (
    <section className="linear-section" id="twin">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="02">The digital twin</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          We don't ask "who has the followers?"<br/>
          <span className="muted">We ask "who speaks to YOUR customers?"</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          Followers lie. Your customers don't. So we model your buyers, then judge every creator against that panel of real people.
        </p>

        {/* 3 steps */}
        <div className="how-grid reveal-stagger" style={{ marginTop: 16 }}>
          {steps.map((s, i) => (
            <div key={s.n} className="how-step" style={i > 0 ? { paddingLeft: 32 } : {}}>
              <span className="step-num"><span className="step-ico"><Icon name={s.icon} size={15}/></span> {s.n}</span>
              <h3 className="step-name">{s.name}</h3>
              <p className="step-desc">{s.desc}</p>
            </div>
          ))}
        </div>

        {/* 3 axes feature panel */}
        <div className="axes-panel reveal" style={{ marginTop: 8 }}>
          <div className="axes-head">
            <span className="axes-kicker">Three axes · scored vs your twins</span>
            <h3 className="axes-title">Every creator gets a twin-fit score.</h3>
          </div>
          <div className="axes-grid">
            {axes.map((a, i) => (
              <div key={a.name} className="axis-card">
                <span className="axis-i">{String(i + 1).padStart(2, '0')}</span>
                <h4 className="axis-name">{a.name}</h4>
                <p className="axis-desc">{a.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 4 · HONESTY AS THE MOAT
// ============================================================
function IrHonesty() {
  return (
    <section className="honesty-strip reveal" id="honesty">
      <div className="container col gap-7" style={{ position: 'relative' }}>
        <span className="mono-label" data-num="03">Honesty as the moat</span>

        <h2 className="honesty-big">
          Measured vs modeled.<br/>
          <span className="em">On every number.</span>
        </h2>

        <p className="honesty-lead">
          We read the real engaged audience from actual comments — not a black-box authenticity score. When something is a count, we show it. When something is an inference, we say so. We'd rather tell you "we can't measure that here" than fake it.
        </p>

        <div className="honesty-cards">
          <div className="honesty-card">
            <MMBadge kind="measured"/>
            <h3 className="hc-title">A real platform count.</h3>
            <p className="hc-desc">Followers, views, comments, reply rate — pulled straight from the platform. What you see is what's there.</p>
          </div>
          <div className="honesty-card">
            <MMBadge kind="modeled"/>
            <h3 className="hc-title">An honest inference.</h3>
            <p className="hc-desc">Audience demographics, values, twin-fit — modeled, clearly labeled, never dressed up as a hard fact.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 5 · COVERAGE — the platforms others skip
// ============================================================
function IrCoverage() {
  const platforms = [
    { name: 'Instagram', audience: 'measured', note: 'Engaged audience read from real comments.' },
    { name: 'TikTok',    audience: 'measured', note: 'Comment-level audience signal, not a vanity score.' },
    { name: 'YouTube',   audience: 'measured', note: 'Long-form engagement and community read.' },
    { name: 'LinkedIn',  audience: 'measured', note: 'The B2B reach nobody else serves.', wedge: true },
    { name: 'Twitch',    audience: 'modeled',  note: 'Reach reported as average viewers, honestly.' },
    { name: 'Pinterest', audience: 'modeled',  note: 'Audience is directional — and we say so.' },
  ];
  return (
    <section className="linear-section" id="coverage">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="04">Coverage</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          The reach that matters<br/>
          <span className="muted">isn't only on Instagram.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          Most tools stop at three consumer platforms. Real reach — and real B2B — lives beyond them. We say honestly what's measured and what's modeled on each.
        </p>

        <div className="coverage-grid reveal-stagger" style={{ marginTop: 16 }}>
          {platforms.map(p => (
            <div key={p.name} className={`coverage-card ${p.wedge ? 'wedge' : ''}`}>
              <div className="cov-head">
                <h3 className="cov-name">{p.name}</h3>
                {p.wedge && <span className="cov-wedge-tag">B2B wedge</span>}
              </div>
              <p className="cov-note">{p.note}</p>
              <div className="cov-foot">
                <span className="cov-foot-lbl">Audience</span>
                <MMBadge kind={p.audience}/>
              </div>
            </div>
          ))}
        </div>

        <p className="coverage-honesty reveal">
          <Icon name="shield" size={14}/> We ship the platforms we actually cover today, and add more as they land — honesty at the roadmap level, not just the metric level.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 6 · ACTIVATION — discovery that doesn't end at a list
// ============================================================
function IrActivation() {
  const steps = [
    { icon: 'search',  name: 'Discover', desc: 'Surface creators that fit your twins — not a keyword dump.' },
    { icon: 'eye',     name: 'Vet',      desc: 'An audience dossier built from real comments — who actually engages.' },
    { icon: 'send',    name: 'Reach out', desc: 'Draft a personalized outreach message, grounded in who the creator is and what they publish.' },
  ];
  return (
    <section className="linear-section" id="activation">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="05">Activation</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Discovery that doesn't<br/>
          <span className="muted">end at a list.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          Every other tool hands you a list and leaves you to DM 200 people by hand. We take you from discover to vet to a drafted, personalized message — ready to send.
        </p>

        <div className="activation-flow reveal-stagger" style={{ marginTop: 16 }}>
          {steps.map((s, i) => (
            <React.Fragment key={s.name}>
              <div className="act-step">
                <span className="act-ico"><Icon name={s.icon} size={20}/></span>
                <h3 className="act-name">{s.name}</h3>
                <p className="act-desc">{s.desc}</p>
              </div>
              {i < steps.length - 1 && <span className="act-arrow"><Icon name="arrow" size={18}/></span>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 7 · STATS
// ============================================================
function IrStats() {
  return (
    <section className="linear-section" style={{ paddingTop: 24 }}>
      <div className="container reveal">
        <div className="bx-stats">
          <div className="bx-stat">
            <span className="v"><span className="accent">3</span></span>
            <span className="k">Match axes · vs your twins</span>
          </div>
          <div className="bx-stat">
            <span className="v">Real</span>
            <span className="k">Comments, not a black box</span>
          </div>
          <div className="bx-stat">
            <span className="v">B2B</span>
            <span className="k">LinkedIn — the wedge others skip</span>
          </div>
          <div className="bx-stat">
            <span className="v"><span className="accent">0</span></span>
            <span className="k">Faked numbers</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 8 · PRICING — standard 3-tier, aligned to the suite
// ============================================================
function IrPricing() {
  return (
    <section className="linear-section" id="pricing">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="06">Pricing</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Start free.<br/>
          <span className="muted">Scale when it pays off.</span>
        </h2>

        <div className="pricing-grid reveal-stagger" style={{ marginTop: 16 }}>

          <div className="price-card">
            <span className="tier">Start</span>
            <h3 className="name">For first studies.</h3>
            <div className="price-row">
              <span className="price">$149</span>
              <span className="period">/ mo</span>
            </div>
            <ul>
              <li>149,000 tokens per month</li>
              <li>All platforms &amp; match axes</li>
              <li>Card payment, monthly or annual (2 months free)</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href={SUITE} className="btn-x cta">Choose Start</a>
          </div>

          <div className="price-card featured">
            <span className="ribbon">Most popular</span>
            <span className="tier">Pro</span>
            <h3 className="name">For ongoing matching.</h3>
            <div className="price-row">
              <span className="price">$299</span>
              <span className="period">/ mo</span>
            </div>
            <ul>
              <li>350,000 tokens per month (+17% bonus)</li>
              <li>Priority studies</li>
              <li>Card payment, monthly or annual</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href={SUITE} className="btn-x brand cta">Choose Pro <span className="arrow">→</span></a>
          </div>

          <div className="price-card">
            <span className="tier">Enterprise</span>
            <h3 className="name">For the whole stack.</h3>
            <div className="price-row">
              <span className="price">Contact us</span>
            </div>
            <ul>
              <li>All GMR products, one wallet</li>
              <li>Volume token economics</li>
              <li>Invoice billing &amp; SSO</li>
              <li>Named matching support</li>
            </ul>
            <a href="#contact" className="btn-x cta">Talk to sales</a>
          </div>

        </div>

        <p className="pricing-micro">
          Start free — no credit card, all platforms included. First study in minutes. Top up anytime · $1 = 1,000 tokens.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 9 · FINAL CTA
// ============================================================
function IrFinalCTA() {
  return (
    <section className="final-cta" id="start">
      <div className="container layer">
        <h2 className="heading reveal">
          Followers lie.<br/>
          <span className="muted">Your customers don't.</span>
        </h2>
        <div className="ctas reveal">
          <a href={SUITE} className="btn-x brand">Try it free <span className="arrow">→</span></a>
          <a href="#contact" className="btn-x">Book a demo</a>
        </div>
        <div className="micro reveal">Every number measured or modeled · No contract · The platforms others skip</div>
      </div>
    </section>
  );
}

// ============================================================
// 10 · FOOTER
// ============================================================
function IrFooter() {
  return (
    <>
      <div className="eco-bar" id="contact">
        <div className="container">
          <div className="inner">
            <span className="label">Part of the GMR stack</span>
            <div className="pellets">
              {ECO_ORDER.map(id => {
                const b = SITE_BRANDS[id];
                const isActive = id === 'influrep';
                return (
                  <a key={id} href={b.url} className={`pellet ${isActive ? 'active' : ''}`}
                     target={isActive ? undefined : '_blank'}
                     rel={isActive ? undefined : 'noopener'}
                     aria-label={b.long}>
                    <span className="eco-mono">
                      <img src={MONO_FILES[id]} alt={b.mono}/>
                    </span>
                    <span className="eco-name">{b.long}</span>
                  </a>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      <footer className="linear-footer">
        <div className="container">
          <div className="row between" style={{ alignItems: 'flex-start', marginBottom: 40, flexWrap: 'wrap', gap: 40 }}>
            <div className="col gap-3" style={{ maxWidth: 360 }}>
              <IrLogo size="m"/>
              <span style={{ color: 'var(--text-4)', fontSize: 13, lineHeight: 1.5, marginTop: 8 }}>
                Match creators to a digital twin of your real buyers — not a generic demographic. Every number measured or modeled. The platforms others skip, including B2B.
              </span>
              <span style={{ color: 'var(--text-5)', fontSize: 12, marginTop: 4 }}>
                Part of GMR — AI-native products that deliver results, not tools.
              </span>
            </div>

            <div className="row gap-7" style={{ flexWrap: 'wrap' }}>
              <div className="col" style={{ minWidth: 130 }}>
                <span className="group-label">Product</span>
                <a href="#twin">The digital twin</a>
                <a href="#honesty">Honesty</a>
                <a href="#coverage">Coverage</a>
                <a href="#activation">Activation</a>
              </div>
              <div className="col" style={{ minWidth: 120 }}>
                <span className="group-label">Get started</span>
                <a href={SUITE}>Try it free</a>
                <a href="#contact">Book a demo</a>
                <a href="#contact">Enterprise</a>
              </div>
              <div className="col" style={{ minWidth: 120 }}>
                <span className="group-label">Account</span>
                <a href={SUITE}>Login</a>
                <a href={SUITE}>Sign up</a>
                <a href="https://status.influrep.com" target="_blank" rel="noopener noreferrer">Status</a>
              </div>
              <div className="col" style={{ minWidth: 110 }}>
                <span className="group-label">Legal</span>
                <a href="https://www.iubenda.com/privacy-policy/74776910" className="iubenda-black iubenda-noiframe iubenda-embed" title="Privacy Policy">Privacy Policy</a>
                <a href="https://www.iubenda.com/privacy-policy/74776910/cookie-policy" className="iubenda-black iubenda-noiframe iubenda-embed" title="Cookie Policy">Cookie Policy</a>
                <a href="https://www.iubenda.com/terms-and-conditions/74776910" className="iubenda-black iubenda-noiframe iubenda-embed" title="Terms and Conditions">Terms and Conditions</a>
              </div>
            </div>
          </div>

          <hr style={{ height: 1, background: 'var(--line)', border: 0 }}/>

          <div className="row between" style={{ padding: '20px 0 0', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
            <span className="mono">© InfluRep · part of GMR Inc · {new Date().getFullYear()}</span>
            <span className="mono">influrep.com</span>
          </div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, {
  Icon, MMBadge, IrLogo,
  IrHeader, IrHero, TwinMatchVisual, IrProblem, IrTwin, IrHonesty,
  IrCoverage, IrActivation, IrStats, IrPricing, IrFinalCTA, IrFooter,
  ECO_ORDER,
});