// crewrev-sections.jsx — CrewRev landing.
// Aligned to GMR v2 + Brynx + Marketear design system. Copy is APPROVED — do not rewrite.

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

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

// ============================================================
// 0 · HEADER
// ============================================================
function CrHeader() {
  return (
    <header className="linear-header">
      <div className="container">
        <CrLogo />
        <nav>
          <a href="#how">How it works</a>
          <a href="#crew">Agents</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 CrHero() {
  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"/> AI revenue team
            </span>

            <h1 className="t-display reveal">
              A full revenue team.<br/>
              <span className="muted">In one conversation.</span>
            </h1>

            <p className="t-lead reveal" style={{ maxWidth: 580 }}>
              A complete go-to-market team costs €400–800K a year and 6–12 months to hire. CrewRev gives you six autonomous agents that run revenue end-to-end — in chat, from day one. You get the pipeline, not another sales tool.
            </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 it work</a>
              </div>
              <span className="cta-microcopy">
                No credit card<span className="sep">·</span>Live agents<span className="sep">·</span>First sprint in minutes
              </span>
            </div>
          </div>

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

// Hero visual — a stylized chat snapshot showing the crew in action.
function CrewChat() {
  const messages = [
    { who: '@founder', tone: 'user', text: 'we need 30 demos this month for the new tier' },
    { who: '@cro',     tone: 'lead', text: 'sprint scoped. SDR on outbound, Content on demand, Ads on retargeting. I\'ll review daily.' },
    { who: '@sdr',     tone: 'agent', text: 'queued 412 ICP accounts · day-1 outbound running · 7 booked.' },
    { who: '@content', tone: 'agent', text: 'published "Switch from <competitor>" — indexing, 4.2k impressions in 24h.' },
    { who: '@ads',     tone: 'agent', text: 'live: ICP retargeting + LAL · CAC tracking €82 · pacing on plan.' },
    { who: '@ae',      tone: 'agent', text: 'inbound chat: 11 qualified · 3 closed-won · €34k MRR added.' },
  ];
  return (
    <div className="report-preview crew-chat" aria-hidden="true">
      <div className="report-chrome">
        <span className="filename">
          <span className="ext">CHAT</span>
          crew · sprint 24
        </span>
        <span className="status">Live · 6 agents</span>
      </div>

      <div className="crew-msgs">
        {messages.map((m, i) => (
          <div key={i} className={`crew-msg ${m.tone}`}>
            <span className="who">{m.who}</span>
            <span className="text">{m.text}</span>
          </div>
        ))}
        <div className="crew-msg typing">
          <span className="who">@nova</span>
          <span className="text"><span className="viz-cursor"/></span>
        </div>
      </div>

      <div className="report-foot">
        <span className="pages">sprint 24 · day 9 / 14</span>
        <span>crewrev · 33 MCP tools</span>
      </div>
    </div>
  );
}

// ============================================================
// 2 · CONTRARIAN STRIP
// ============================================================
function CrContrarian() {
  return (
    <section className="brynx-strip reveal">
      <div className="container">
        <p className="text">
          Stop hiring a revenue team. Stop stacking sales tools.<br/>
          <span className="em">Say what you want to grow — the crew runs it.</span>
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 3 · PROBLEM
// ============================================================
function CrProblem() {
  const items = [
    { n: '01', strike: '€400–800K / year',       body: "A team you can't afford. €400–800K/year, 6–12 months to assemble, churns in 18." },
    { n: '02', strike: 'Ten tools, zero glue',   body: 'A stack nobody runs. CRM, outreach, ads, content — ten tools, zero coordination.' },
    { n: '03', strike: 'Tools that wait',        body: 'Tools wait for you. Every one needs a human to drive it. The work still falls on you.' },
  ];
  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 }}>
          Revenue doesn't break for lack of tools.<br/>
          <span className="muted">It breaks for lack of execution.</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 CrDelivers() {
  const props = [
    { g: '◆', name: 'Autonomous, not assisted.',         desc: "Agents execute the work, they don't just suggest it." },
    { g: '☷', name: 'One conversation, full coordination.', desc: 'No ten dashboards, no handoffs lost.' },
    { g: '⇉', name: 'Sprints, not seats.',               desc: 'Work is organized into sprints the crew runs to completion.' },
  ];
  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 CrewRev delivers</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          A team that executes,<br/>
          <span className="muted">not tools that wait.</span>
        </h2>
        <p className="t-lead reveal" style={{ maxWidth: 800 }}>
          Tell the crew what to grow. Six agents plan, run and report — autonomously, coordinated, in one conversation.
        </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 · THE CREW (6 agents)
// ============================================================
function CrCrew() {
  const agents = [
    { handle: '@sdr',     name: 'SDR',             role: 'Finds prospects, runs outbound, books the pipeline.',         glyph: '◐', tag: 'pipeline' },
    { handle: '@cro',     name: 'CRO',             role: 'Orchestrates the crew, plans campaigns, owns the number.',    glyph: '◆', tag: 'orchestration', lead: true },
    { handle: '@content', name: 'Content & SEO',   role: 'Writes, ranks, publishes — the demand engine.',               glyph: '§', tag: 'demand' },
    { handle: '@ads',     name: 'Ads',             role: 'Plans and runs paid acquisition across channels.',            glyph: '⊕', tag: 'acquisition' },
    { handle: '@ae',      name: 'AE Chat',         role: 'Converts inbound in real time, recognizes prospects, closes.', glyph: '⇄', tag: 'conversion' },
    { handle: '@nova',    name: 'Nova CSM',        role: 'Retains and grows customers, flags churn before it happens.',  glyph: '∞', tag: 'retention' },
  ];
  return (
    <section className="linear-section" id="crew">
      <hr className="section-rule"/>
      <div className="container col gap-7" style={{ paddingTop: 56 }}>
        <span className="mono-label" data-num="03">The crew</span>
        <h2 className="t-h1 reveal" style={{ maxWidth: 1100, marginTop: 4 }}>
          Six agents.<br/>
          <span className="muted">One revenue team.</span>
        </h2>

        <div className="crew-grid reveal-stagger" style={{ marginTop: 16 }}>
          {agents.map(a => (
            <div key={a.handle} className={`crew-card ${a.lead ? 'lead' : ''}`}>
              <div className="crew-head">
                <span className="crew-glyph">{a.glyph}</span>
                <div className="col" style={{ gap: 2 }}>
                  <h3 className="crew-name">{a.name}</h3>
                  <span className="crew-handle">{a.handle}</span>
                </div>
                {a.lead && <span className="crew-lead-tag">lead</span>}
              </div>
              <p className="crew-role">{a.role}</p>
              <span className="crew-tag">{a.tag}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 6 · HOW IT WORKS
// ============================================================
function CrHow() {
  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 }}>
          Say the goal.<br/>
          <span className="muted">The crew runs the sprint.</span>
        </h2>

        <div className="how-grid reveal-stagger" style={{ marginTop: 16 }}>
          <div className="how-step">
            <span className="step-num">01 · Ask</span>
            <h3 className="step-name">Tell the CRO what to grow.</h3>
            <p className="step-desc">In plain language. No briefing template, no sales-ops setup.</p>
          </div>
          <div className="how-step" style={{ paddingLeft: 32 }}>
            <span className="step-num">02 · The crew runs</span>
            <h3 className="step-name">Six agents plan and execute.</h3>
            <p className="step-desc">Agents plan a sprint and execute it, coordinated, autonomously.</p>
          </div>
          <div className="how-step" style={{ paddingLeft: 32 }}>
            <span className="step-num">03 · Review</span>
            <h3 className="step-name">A sprint review.</h3>
            <p className="step-desc">What shipped, what worked, what's next — in one conversation.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 7 · STATS
// ============================================================
function CrStats() {
  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">Autonomous agents</span>
          </div>
          <div className="bx-stat">
            <span className="v">33</span>
            <span className="k">Integrated MCP tools</span>
          </div>
          <div className="bx-stat">
            <span className="v">9</span>
            <span className="k">Memory layers</span>
          </div>
          <div className="bx-stat">
            <span className="v">1</span>
            <span className="k">Conversation runs it all</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// 8 · REPLACES
// ============================================================
function CrReplaces() {
  return (
    <section className="replaces-strip reveal" id="replaces">
      <div className="container">
        <h2 className="replaces-big">
          Replaces <span className="accent">·</span><br/>
          <span className="em">the GTM team.</span>
        </h2>
        <p className="replaces-foot">
          Sales-tool stacks, agency BDR teams, CRM dashboards, six-figure headcount — folded into one crew that ships pipeline.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 9 · PRICING
// ============================================================
function CrPricing() {
  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 sprints.</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>Full crew · 6 agents</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 growth.</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 sprints</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 pipeline support</li>
            </ul>
            <a href="#contact" className="btn-x cta">Talk to sales</a>
          </div>

        </div>

        <p className="pricing-micro">
          Start free — live agents, first sprint in minutes. No credit card. Top up anytime · €1 = 1,000 tokens.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// 10 · FINAL CTA
// ============================================================
function CrFinalCTA() {
  return (
    <section className="final-cta" id="start">
      <div className="container layer">
        <h2 className="heading reveal">
          Your revenue team<br/>
          <span className="muted">could start its first sprint today.</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 · Live agents · First sprint in minutes</div>
      </div>
    </section>
  );
}

// ============================================================
// 11 · FOOTER
// ============================================================
function CrFooter() {
  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 === 'crewrev';
                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 }}>
              <CrLogo size="m"/>
              <span style={{ color: 'var(--text-4)', fontSize: 13, lineHeight: 1.5, marginTop: 8 }}>
                Six autonomous agents that run revenue end-to-end — in chat, from day one. The pipeline, not another sales tool.
              </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="#crew">The crew</a>
                <a href="#sample">See it work</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="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">© CrewRev · part of GMR Inc · {new Date().getFullYear()}</span>
            <span className="mono">crewrev.com</span>
          </div>
        </div>
      </footer>
    </>
  );
}

Object.assign(window, {
  CrLogo,
  CrHeader, CrHero, CrewChat, CrContrarian, CrProblem,
  CrDelivers, CrCrew, CrHow, CrStats, CrReplaces,
  CrPricing, CrFinalCTA, CrFooter,
  ECO_ORDER,
});