// influrep-sections.jsx — InfluRep landing.
// Aligned to GMR v2 + Brynx + Marketear + CrewRev + DTwin design system.
// Copy is BOZZA — iterate w/ Giuseppe.

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

// ---- Logo: INFLUREP wordmark ----
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="#how">How it works</a>
          <a href="#usecases">Use cases</a>
          <a href="#pricing">Pricing</a>
          <a href="#start" className="btn-x brand">Start free <span className="arrow">→</span></a>
        </nav>
      </div>
    </header>
  );
}

// ============================================================
// 1 · HERO
// ============================================================
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"/> Creator intelligence
            </span>

            <h1 className="t-display reveal">
              From public posts<br/>
              <span className="muted">to strategic insight.</span>
            </h1>

            <p className="t-lead reveal" style={{ maxWidth: 580 }}>
              Vetting a creator by gut feel — or by vanity metrics — is a bet. InfluRep reads what a creator actually posts and how their community responds, and returns the strategic read: tone, sentiment, risk, brand fit. You get the verdict, not a follower count.
            </p>

            <div className="col gap-3 reveal" style={{ marginTop: 8 }}>
              <div className="row gap-3" style={{ flexWrap: 'wrap' }}>
                <a href="#start" className="btn-x brand">Start free <span className="arrow">→</span></a>
                <a href="#sample" className="btn-x">See a sample report</a>
              </div>
              <span className="cta-microcopy">
                No credit card<span className="sep">·</span>No setup<span className="sep">·</span>First report in minutes
              </span>
            </div>
          </div>

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

// Hero visual — a creator verdict card: scores, sample posts, community sentiment.
function CreatorReport() {
  return (
    <div className="report-preview" aria-hidden="true">
      <div className="report-chrome">
        <span className="filename">
          <span className="ext">REPORT</span>
          @creator-handle · verdict.pdf
        </span>
        <span className="status">Generated · 6m 48s</span>
      </div>

      <h4 className="report-title">@creator-handle · brand fit · skincare</h4>
      <div className="report-sub">12 months · 6 platforms · 3,402 posts analysed</div>

      <div className="report-section-h">Verdict</div>
      <div className="report-bars"><span className="lbl">Tone match</span><span className="track"><span className="fill" style={{ width: '78%' }}/></span><span className="val">High</span></div>
      <div className="report-bars"><span className="lbl">Community sentiment</span><span className="track"><span className="fill" style={{ width: '82%' }}/></span><span className="val">+82%</span></div>
      <div className="report-bars"><span className="lbl">Brand fit</span><span className="track"><span className="fill" style={{ width: '70%' }}/></span><span className="val">Strong</span></div>
      <div className="report-bars"><span className="lbl">Reputation risk</span><span className="track"><span className="fill" style={{ width: '14%' }}/></span><span className="val">Low</span></div>

      <div className="report-section-h">What we found</div>
      <div className="report-find">
        <span className="idx">01</span>
        <span>Editorial voice consistently educational, with light humor — fits a clinical-adjacent brand. <span className="cite">[412 posts]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">02</span>
        <span>Community asks substantive questions; high reply rate from creator (74%). <span className="cite">[community signal]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">03</span>
        <span>Two flagged posts (2023-Q2) on competitor product — context-appropriate, no risk. <span className="cite">[risk scan]</span></span>
      </div>

      <div className="report-foot">
        <span className="pages">verdict · ready to sign</span>
        <span>influrep · 4 use cases</span>
      </div>
    </div>
  );
}

// ============================================================
// 2 · CONTRARIAN
// ============================================================
function IrContrarian() {
  return (
    <section className="brynx-strip reveal">
      <div className="container">
        <p className="text">
          Stop counting followers. Stop guessing fit.<br/>
          <span className="em">Ask who a creator really is — get the answer.</span>
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 3 · PROBLEM
// ============================================================
function IrProblem() {
  const items = [
    { n: '01', strike: 'Vanity metrics',     body: 'Vanity metrics lie. Followers and likes say nothing about fit or risk.' },
    { n: '02', strike: 'Scrolling by hand',  body: "Manual vetting is slow. Scrolling a year of posts by hand doesn't scale." },
    { n: '03', strike: 'Hidden reputation risk', body: "Reputation risk is invisible — until it isn't. One old post can sink a campaign." },
  ];
  return (
    <section className="linear-section" id="problem">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="01">The problem</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Picking creators on metrics<br/>
          <span className="muted">is picking blind.</span>
        </h2>

        <div className="problem-list reveal-stagger" style={{ marginTop: 16 }}>
          {items.map(it => (
            <div key={it.n} className="problem-row">
              <div className="num">{it.n} ·</div>
              <div>
                <div className="body">{it.body}</div>
                <div className="strike-meta">{it.strike}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 4 · DELIVERS (RaaS)
// ============================================================
function IrDelivers() {
  const props = [
    { g: '◆', name: 'Use-case driven, not metric-driven.', desc: 'You choose the question; it shapes the analysis.' },
    { g: '⇄', name: 'Reads content and community.',        desc: 'What they post, how people respond.' },
    { g: '◇', name: 'A verdict you can act on.',           desc: 'Sentiment, tone, risk, brand fit — interpreted.' },
  ];
  return (
    <section className="linear-section" id="delivers">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="02">What InfluRep delivers</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          The strategic read,<br/>
          <span className="muted">not a metrics dashboard.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          Pick what you need to know. InfluRep adapts collection and analysis to the question and returns an interpreted answer.
        </p>

        <div className="delivers-grid reveal-stagger" style={{ marginTop: 16 }}>
          {props.map(p => (
            <div key={p.name} className="deliver-card">
              <span className="glyph">{p.g}</span>
              <h3 className="name">{p.name}</h3>
              <p className="desc">{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 5 · USE CASES (4 — 2x2)
// ============================================================
function IrUseCases() {
  const uses = [
    { name: 'Content opportunities',  role: "Where a creator's content can work for your brand.",      glyph: '✦', tag: 'opportunity' },
    { name: 'Community sentiment',    role: 'Polarity and emotion in how the audience responds.',     glyph: '⌒', tag: 'sentiment' },
    { name: 'Strategy & tone of voice', role: 'The editorial pattern and voice that defines them.',     glyph: '§', tag: 'editorial' },
    { name: 'Sensitive themes & brand fit', role: 'Reputational risk and alignment with your values.', glyph: '⚠', tag: 'risk' },
  ];
  return (
    <section className="linear-section" id="usecases">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="03">Use cases</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Choose what<br/>
          <span className="muted">you need to know.</span>
        </h2>

        <div className="crew-grid usecase-grid reveal-stagger" style={{ marginTop: 16 }}>
          {uses.map(u => (
            <div key={u.name} className="crew-card">
              <div className="crew-head">
                <span className="crew-glyph">{u.glyph}</span>
                <div className="col" style={{ gap: 2 }}>
                  <h3 className="crew-name">{u.name}</h3>
                </div>
              </div>
              <p className="crew-role">{u.role}</p>
              <span className="crew-tag">{u.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 6 · HOW IT WORKS
// ============================================================
function IrHow() {
  return (
    <section className="linear-section" id="how">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="04">How it works</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Pick the question.<br/>
          <span className="muted">Get the read.</span>
        </h2>

        <div className="how-grid reveal-stagger" style={{ marginTop: 16 }}>
          <div className="how-step">
            <span className="step-num">01 · Choose</span>
            <h3 className="step-name">Select what you need to know.</h3>
            <p className="step-desc">Opportunity, sentiment, voice, or risk — pick the lens.</p>
          </div>
          <div className="how-step" style={{ paddingLeft: 32 }}>
            <span className="step-num">02 · InfluRep runs</span>
            <h3 className="step-name">Collection &amp; analysis adapt.</h3>
            <p className="step-desc">The pipeline reshapes itself to the question. Content + community signal.</p>
          </div>
          <div className="how-step" style={{ paddingLeft: 32 }}>
            <span className="step-num">03 · Decide</span>
            <h3 className="step-name">A report, ready before you sign.</h3>
            <p className="step-desc">A strategic report — interpreted, actionable, exportable.</p>
          </div>
        </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">6</span></span>
            <span className="k">Social platforms</span>
          </div>
          <div className="bx-stat">
            <span className="v">4</span>
            <span className="k">Use-case modes</span>
          </div>
          <div className="bx-stat">
            <span className="v">3</span>
            <span className="k">Export formats · PDF · CSV · JSON</span>
          </div>
          <div className="bx-stat">
            <span className="v">0</span>
            <span className="k">Gut-feel decisions</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 8 · REPLACES
// ============================================================
function IrReplaces() {
  return (
    <section className="replaces-strip reveal" id="replaces">
      <div className="container">
        <h2 className="replaces-big">
          Replaces <span className="accent">·</span><br/>
          <span className="em">manual creator vetting.</span>
        </h2>
        <p className="replaces-foot">
          Creator-vetting agencies, manual due diligence, gut-feel signing, vanity-metric dashboards — folded into one product that ships the verdict.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 9 · PRICING
// ============================================================
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="05">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 reports.</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 use cases</li>
              <li>Card payment, monthly or annual (2 months free)</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href="#start" 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 vetting.</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 analysis</li>
              <li>Card payment, monthly or annual</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href="#start" 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 analysis 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, 4 use cases included. First report in minutes. Top up anytime · $1 = 1,000 tokens.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 10 · FINAL CTA
// ============================================================
function IrFinalCTA() {
  return (
    <section className="final-cta" id="start">
      <div className="container layer">
        <h2 className="heading reveal">
          Know who you're signing<br/>
          <span className="muted">— before you sign.</span>
        </h2>
        <div className="ctas reveal">
          <a href="#" className="btn-x brand">Start free <span className="arrow">→</span></a>
          <a href="#contact" className="btn-x">Talk to us</a>
        </div>
        <div className="micro reveal">No credit card · 4 use cases · First report in minutes</div>
      </div>
    </section>
  );
}

// ============================================================
// 11 · 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 }}>
                Creator intelligence. From public posts to strategic insight — tone, sentiment, risk and brand fit, interpreted.
              </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="#how">How it works</a>
                <a href="#usecases">Use cases</a>
                <a href="#sample">Sample report</a>
              </div>
              <div className="col" style={{ minWidth: 120 }}>
                <span className="group-label">Pricing</span>
                <a href="#pricing">Plans</a>
                <a href="#start">Start free</a>
                <a href="#contact">Enterprise</a>
              </div>
              <div className="col" style={{ minWidth: 120 }}>
                <span className="group-label">Account</span>
                <a href="#">Login</a>
                <a href="#start">Sign up</a>
              </div>
              <div className="col" style={{ minWidth: 110 }}>
                <span className="group-label">Legal</span>
                <a href="#">Privacy</a>
                <a href="#">Terms</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, {
  IrLogo,
  IrHeader, IrHero, CreatorReport, IrContrarian, IrProblem,
  IrDelivers, IrUseCases, IrHow, IrStats, IrReplaces,
  IrPricing, IrFinalCTA, IrFooter,
  ECO_ORDER,
});