// Main app — composes hero + sections
function App() {
  // Reveal-on-scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Nav />

      {/* HERO */}
      <section className="hero">
        <div className="hero-bg" />
        <div className="container">
          <div className="hero-grid">
            <div className="hero-copy">
              <span className="eyebrow reveal"><span className="dot" /> AI lead intelligence · v3.2</span>
              <h1 className="h-display reveal reveal-d1" style={{ marginTop: 18 }}>
                Find and qualify leads <em style={{ fontStyle: 'normal', position: 'relative' }}>
                  <span style={{ position: 'relative', zIndex: 1 }}>5×&nbsp;faster</span>
                  <span style={{
                    position: 'absolute', left: '-2%', right: '-2%', bottom: '6%', height: '32%',
                    background: 'var(--accent)', zIndex: 0, borderRadius: 4,
                  }} />
                </em>.
              </h1>
              <p className="lede reveal reveal-d2" style={{ marginTop: 24 }}>
                Manual research eats 40% of every sales week. Pipelane finds warm accounts, predicts buying intent, and ranks them by revenue potential — so your team only talks to leads that are ready.
              </p>
              <div className="hero-cta-row reveal reveal-d3">
                <a className="btn btn-accent">
                  Start free 14-day trial
                  <span className="arrow">→</span>
                </a>
                <a className="btn btn-ghost">Watch 2-min demo</a>
              </div>
              <div className="hero-callout reveal reveal-d3">
                <span className="pill mono">5×</span>
                <span><strong>Qualify in 1 day</strong> vs. 1 week of manual research</span>
              </div>

              <div className="hero-stat-strip reveal reveal-d4">
                <div className="hero-stat">
                  <div className="num">40%</div>
                  <div className="label">of sales work, automated</div>
                </div>
                <div className="hero-stat">
                  <div className="num">200M+</div>
                  <div className="label">accounts mapped weekly</div>
                </div>
                <div className="hero-stat">
                  <div className="num">40+</div>
                  <div className="label">intent signals scored</div>
                </div>
              </div>
            </div>
            <div className="reveal reveal-d2">
              <HeroPipeline />
            </div>
          </div>
        </div>
      </section>

      <LogoBar />

      <HowItWorks />

      {/* DEMO DASHBOARD */}
      <section className="demo" id="demo">
        <div className="demo-bg" />
        <div className="container" style={{ position: 'relative' }}>
          <div className="demo-head reveal">
            <div>
              <span className="eyebrow"><span className="dot" /> The product</span>
              <h2 className="h-section" style={{ marginTop: 18, maxWidth: '18ch' }}>
                Your pipeline, scored and sorted by who's actually ready to buy.
              </h2>
            </div>
            <div className="demo-tabs">
              <span className="demo-tab active">Pipeline</span>
              <span className="demo-tab">Signals</span>
              <span className="demo-tab">Sequences</span>
              <span className="demo-tab">CRM Sync</span>
            </div>
          </div>
          <div className="reveal reveal-d2">
            <DemoDashboard />
          </div>
        </div>
      </section>

      <Pricing />

      <FAQ />

      <CTAFooter />
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);