// marketear-sections.jsx — Marketear landing.
// Aligned to GMR v2 + sibling product sites. Marketear = the LISTENING LENS of GMR:
// it LOOKALIKE-MATCHES each real post to the most similar twin in the shared
// population, so a stream of anonymous posts becomes a readable audience — who's
// saying what, by segment. Always "similar to —", with confidence: a match, never a claim.

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

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

// ============================================================
// 0 · HEADER
// ============================================================
function MeHeader() {
  return (
    <header className="linear-header">
      <div className="container">
        <MeLogo />
        <nav>
          <a href="#unlocks">What it unlocks</a>
          <a href="#pipeline">Pipeline</a>
          <a href="#pricing">Pricing</a>
          <a href="https://app.marketear.co/login" className="btn-x brand">Try it free <span className="arrow">→</span></a>
        </nav>
      </div>
    </header>
  );
}

// ============================================================
// 1 · HERO
// ============================================================
function MeHero() {
  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"/> The listening lens of GMR
            </span>

            <h1 className="t-display reveal">
              From what's posted<br/>
              <span className="muted">to what your market thinks.</span>
            </h1>

            <p className="t-lead reveal" style={{ maxWidth: 580 }}>
              Agents read six platforms and return a living strategic report — and digital twins tell you who's behind every post. Interpretation, not dashboards.
            </p>

            <div className="col gap-3 reveal" style={{ marginTop: 8 }}>
              <div className="row gap-3" style={{ flexWrap: 'wrap' }}>
                <a href="https://app.marketear.co/login" className="btn-x brand">Try it free <span className="arrow">→</span></a>
                <a href="#contact" className="btn-x">Talk to us</a>
              </div>
              <span className="cta-microcopy">
                No credit card<span className="sep">·</span>Six platforms<span className="sep">·</span>Who, not just what
              </span>
            </div>
          </div>

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

// Hero visual — a stylized Marketear report preview
function ListeningPreview() {
  return (
    <div className="report-preview" aria-hidden="true">
      <div className="report-chrome">
        <span className="filename">
          <span className="ext">REPORT</span>
          fashion-aw26-narrative.md
        </span>
        <span className="status">Synthesized · by segment</span>
      </div>

      <h4 className="report-title">FW26 outerwear · cultural narrative</h4>
      <div className="report-sub">14,902 posts · 6 platforms · matched to twins</div>

      <div className="report-section-h">What's happening</div>
      <div className="report-find">
        <span className="idx">01</span>
        <span>"Quiet luxury" fatigue is real — engagement on the term down 41% QoQ; "loud quiet" parody surging. <span className="cite">[1.2k posts]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">02</span>
        <span>Vintage shearling is the rising silhouette on TikTok &amp; Instagram, led by 3 micro-trendsetters. <span className="cite">[840 posts]</span></span>
      </div>
      <div className="report-find">
        <span className="idx">03</span>
        <span>Reddit r/malefashionadvice frames it as "anti-tech-bro" — code-switch from utility to heritage. <span className="cite">[212 threads]</span></span>
      </div>

      <div className="report-section-h">Who's behind it · matched to twins</div>
      <div className="report-bars"><span className="lbl">Urban W · 25–34</span><span className="track"><span className="fill" style={{ width: '88%' }}/></span><span className="val">38%</span></div>
      <div className="report-bars"><span className="lbl">Gen-Z · student</span><span className="track"><span className="fill" style={{ width: '72%' }}/></span><span className="val">26%</span></div>
      <div className="report-bars"><span className="lbl">Menswear · 35+</span><span className="track"><span className="fill" style={{ width: '48%' }}/></span><span className="val">18%</span></div>
      <div className="report-bars"><span className="lbl">Other</span><span className="track"><span className="fill" style={{ width: '32%' }}/></span><span className="val">18%</span></div>

      <div className="report-foot">
        <span className="pages">p. 3 / 18</span>
        <span>marketear · the listening lens</span>
      </div>
    </div>
  );
}

// ============================================================
// 2 · THE SHIFT — one-liner strip
// ============================================================
function MeContrarian() {
  return (
    <section className="brynx-strip reveal">
      <div className="container">
        <p className="text">
          We don't hand you a dashboard.<br/>
          <span className="em">We hand you the read.</span>
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 3 · THE SHIFT — not another dashboard
// ============================================================
function MeProblem() {
  const items = [
    { n: '01', tag: 'Who?',            body: 'A wall of anonymous posts with no one behind them.' },
    { n: '02', tag: 'Vocal minority',  body: 'Skewed toward whoever posts loudest — never the silent majority.' },
    { n: '03', tag: 'No read',         body: 'Counts and charts, little of what it actually means.' },
  ];
  return (
    <section className="linear-section" id="shift">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="01">The shift</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Not another<br/>
          <span className="muted">dashboard.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          Social listening shows you what the vocal minority posted: anonymous, skewed, shallow. You never learn who is talking — or whether the silent majority agrees.
        </p>

        <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.tag}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 4 · THE MECHANISM — every post matched to a twin
// ============================================================
function MeDelivers() {
  return (
    <section className="linear-section" id="mechanism">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="02">The mechanism</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Every post,<br/>
          <span className="muted">matched to a twin.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 820 }}>
          Marketear takes each real post and lookalike-matches it to the most similar twin in the population. The post inherits that twin's DNA — so you learn the likely profile behind it. A stream of anonymous posts becomes a readable audience: who's saying what, by segment.
        </p>

        <p className="match-note reveal">
          And because it's a match, never a claim: every profile comes as <strong>"similar to —"</strong>, with its confidence. We never pass a guess off as a fact.
        </p>

        <div className="pop-card reveal">
          <div className="pop-badge">
            <span className="pop-dot"/>
            <span className="pop-name">Twin population<small>Shared across GMR</small></span>
          </div>
          <p className="pop-body">
            Each twin carries a <strong>DNA</strong> — demographics, psychographics, behavior. Match a post to its twin and the post inherits that profile. <strong>Every match makes the population sharper</strong> — for every lens.
          </p>
        </div>

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

          <div className="engine">
            <div className="head">
              <span className="num">01</span>
              <span className="codename">Lookalike-match</span>
            </div>
            <h3 className="title">Each post → its twin.</h3>
            <p className="desc">Every post is matched to the most similar twin — never a claim, always "similar to", with its confidence.</p>
            <div className="viz">
              <div className="viz-engine-strategy">
                <div className="step"><span className="n">≈</span><span>"moved to a smaller brand finally"</span><span className="pri high">0.88</span></div>
                <div className="step"><span className="n">≈</span><span>"quiet luxury is so done now"</span><span className="pri high">0.84</span></div>
                <div className="step"><span className="n">≈</span><span>"tech jackets feel over"</span><span className="pri">0.81</span></div>
                <div className="step"><span className="n">≈</span><span>"thrifted shearling &gt;&gt;&gt;"</span><span className="pri">0.79</span></div>
              </div>
            </div>
          </div>

          <div className="engine">
            <div className="head">
              <span className="num">02</span>
              <span className="codename">Twin DNA</span>
            </div>
            <h3 className="title">The profile behind it.</h3>
            <p className="desc">The matched twin lends its demographics, psychographics and behavior — the likely person behind the post.</p>
            <div className="viz">
              <div className="viz-engine-research">
                {Array.from({ length: 24 }).map((_, i) => {
                  const v = (i * 11 + 3) % 9;
                  const cls = v > 7 ? 'b3' : v > 5 ? 'b2' : v > 2 ? 'b1' : '';
                  return <div key={i} className={`cell ${cls}`}/>;
                })}
              </div>
            </div>
          </div>

          <div className="engine">
            <div className="head">
              <span className="num">03</span>
              <span className="codename">By segment</span>
            </div>
            <h3 className="title">A readable audience.</h3>
            <p className="desc">Anonymous posts resolve into segments — who's saying what, re-weighted to the real market.</p>
            <div className="viz">
              <div className="viz-engine-pulse">
                {[0.4, 0.6, 0.5, 0.8, 0.55, 0.7, 0.45, 0.9, 0.5, 0.65, 0.8, 0.55, 0.7, 0.5, 0.85, 0.6, 0.4, 0.75, 0.55, 0.9].map((h, i) => (
                  <div key={i} className="bar" style={{ animationDelay: `${i * 0.08}s`, transform: `scaleY(${h})` }}/>
                ))}
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

// ============================================================
// 5 · WHAT IT UNLOCKS
// ============================================================
function MeUnlocks() {
  const items = [
    { n: '01', name: 'Who, not just what',         body: 'Segment the conversation by demographic, psychographic and behavior.' },
    { n: '02', name: 'Cross-analysis',             body: 'Any signal × any segment — "purchase intent among urban women 25–34."' },
    { n: '03', name: 'Population, not just posters', body: 'Re-weight the conversation to the real market, with confidence intervals — the twins correct for who posts.' },
    { n: '04', name: 'A living report, not a snapshot', body: 'Agentic synthesis that interprets, updates and recommends.' },
  ];
  return (
    <section className="linear-section" id="unlocks">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="03">What it unlocks</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          A readable audience.<br/>
          <span className="muted">Not a wall of posts.</span>
        </h2>

        <div className="whatyouget-list reveal-stagger" style={{ marginTop: 16 }}>
          {items.map(it => (
            <div key={it.n} className="wyg-row">
              <span className="num">{it.n}</span>
              <h3 className="wyg-name">{it.name}</h3>
              <p className="wyg-body">{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 6 · THE PIPELINE (5 agents) — Marketear's signature section
// ============================================================
function MePipeline() {
  const agents = [
    { n: '01', name: 'PM',               role: 'Scopes the question into a research plan.',                    glyph: '◆' },
    { n: '02', name: 'Query Architect',  role: 'Turns intent into semantic queries across platforms.',         glyph: '⌗' },
    { n: '03', name: 'Data Scientist',   role: 'Finds patterns, sentiment, anomalies in the noise.',           glyph: '∿' },
    { n: '04', name: 'DataViz',          role: 'Builds the charts that carry the argument.',                   glyph: '▦' },
    { n: '05', name: 'Report Compiler',  role: 'Writes the living strategic document.',                        glyph: '§' },
  ];
  return (
    <section className="linear-section" id="pipeline">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="04">The pipeline</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Five agents.<br/>
          <span className="muted">One analyst team.</span>
        </h2>

        <div className="pipeline reveal-stagger" style={{ marginTop: 16 }}>
          {agents.map((a, i) => (
            <div key={a.n} className="agent">
              <div className="rail">
                <span className="bead">{a.n}</span>
                {i < agents.length - 1 && <span className="connector" aria-hidden="true"/>}
              </div>
              <div className="agent-card">
                <div className="head">
                  <span className="glyph">{a.glyph}</span>
                  <h3 className="title">{a.name}</h3>
                </div>
                <p className="desc">{a.role}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 7 · STATS
// ============================================================
function MeStats() {
  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">Platforms read in one pass</span>
          </div>
          <div className="bx-stat">
            <span className="v">Every post</span>
            <span className="k">Matched to a twin</span>
          </div>
          <div className="bx-stat">
            <span className="v">By segment</span>
            <span className="k">Who's saying what</span>
          </div>
          <div className="bx-stat">
            <span className="v">Living</span>
            <span className="k">Report, not a snapshot</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 8 · PART OF THE SUITE
// ============================================================
function MeReplaces() {
  return (
    <section className="replaces-strip reveal" id="suite">
      <div className="container">
        <h2 className="replaces-big">
          One twin population. <span className="accent">·</span><br/>
          <span className="em">Sharper with every post.</span>
        </h2>
        <p className="replaces-foot">
          Marketear runs on the same twin population as the rest of GMR. Every post it matches makes that population sharper — for every lens. The more you listen, the smarter the whole suite gets.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 9 · PROOF
// ============================================================
function MeProof() {
  return (
    <section className="proof-band reveal" id="proof">
      <div className="container col gap-3">
        <span className="mono-label" data-num="05">Proof</span>
        <p className="proof-quote">
          Real briefs, real brands: from a topic to a <span className="accent">strategic answer</span> in minutes.
        </p>
        <a href="#sample" className="proof-foot">Scientific foundation · Park et al. 2024 · sample reports <span className="arrow">→</span></a>
      </div>
    </section>
  );
}

// ============================================================
// 10 · PRICING — 3 tiers, middle highlighted
// ============================================================
function MePricing() {
  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 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 six platforms</li>
              <li>Card payment, monthly or annual (2 months free)</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href="https://app.marketear.co/login" 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 listening.</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 pipeline runs</li>
              <li>Card payment, monthly or annual</li>
              <li>Top-up anytime — $1 = 1,000 tokens</li>
            </ul>
            <a href="https://app.marketear.co/login" 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 pipeline 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, no setup. First report in minutes. Top up anytime · $1 = 1,000 tokens.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 11 · FINAL CTA
// ============================================================
function MeFinalCTA() {
  return (
    <section className="final-cta" id="start">
      <div className="container layer">
        <h2 className="heading reveal">
          Give us the topic.<br/>
          <span className="muted">We give you the audience.</span>
        </h2>
        <div className="ctas reveal">
          <a href="https://app.marketear.co/login" className="btn-x brand">Try it free <span className="arrow">→</span></a>
          <a href="#contact" className="btn-x">Book a call</a>
        </div>
        <div className="micro reveal">No credit card · Six platforms · Who, not just what</div>
      </div>
    </section>
  );
}

// ============================================================
// 12 · FOOTER
// ============================================================
function MeFooter() {
  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 === 'marketear';
                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 }}>
              <MeLogo size="m"/>
              <span style={{ color: 'var(--text-4)', fontSize: 13, lineHeight: 1.5, marginTop: 8 }}>
                The listening lens of GMR. Agents read six platforms and digital twins tell you who's behind every post — a living strategic report, interpretation not dashboards.
              </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="#unlocks">What it unlocks</a>
                <a href="#pipeline">Pipeline</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="https://app.marketear.co/login">Try it free</a>
                <a href="#contact">Enterprise</a>
              </div>
              <div className="col" style={{ minWidth: 120 }}>
                <span className="group-label">Account</span>
                <a href="https://app.marketear.co/login">Login</a>
                <a href="https://app.marketear.co/login">Sign up</a>
                <a href="https://status.marketear.co" 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">© Marketear · part of GMR Inc · {new Date().getFullYear()}</span>
            <span className="mono">marketear.co</span>
          </div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, {
  MeLogo,
  MeHeader, MeHero, ListeningPreview, MeContrarian, MeProblem,
  MeDelivers, MeUnlocks, MePipeline, MeStats, MeReplaces,
  MeProof, MePricing, MeFinalCTA, MeFooter,
  ECO_ORDER,
});
