// Sections: HowItWorks, Logos, Pricing, FAQ, CTA, Nav
function Logo({ dark }) {
  return (
    <div className="logo">
      <div className="logo-mark" />
      <span>Pipelane</span>
    </div>
  );
}

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [overDark, setOverDark] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 20);
      // detect if nav is over a dark section
      const el = document.elementFromPoint(window.innerWidth / 2, 40);
      if (el) {
        const dark = el.closest('.dark, .demo, .cta');
        setOverDark(!!dark);
      }
    };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav className="nav">
      <div className={`nav-inner ${overDark ? 'dark-nav' : ''}`}>
        <Logo />
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#demo">Product</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <a className="btn btn-ghost" style={{ padding: '8px 14px', fontSize: 13 }}>Sign in</a>
          <a className="btn btn-accent" style={{ padding: '8px 14px', fontSize: 13 }}>
            Start free
          </a>
        </div>
      </div>
    </nav>
  );
}

function HowItWorks() {
  return (
    <section className="section-pad" id="how">
      <div className="container">
        <div className="reveal">
          <span className="eyebrow"><span className="dot" /> How it works</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end', marginTop: 20 }} className="reveal reveal-d1">
          <h2 className="h-section">From a blank list to qualified leads — in three quiet steps.</h2>
          <p className="lede">No more sifting through 10,000 LinkedIn profiles to find five people worth emailing. Pipelane runs the search, the scoring, and the sequencing while you focus on closing.</p>
        </div>

        <div className="steps reveal reveal-d2">
          <div className="step">
            <span className="step-num mono">01 / DISCOVER</span>
            <h3>Map every account that fits your ICP</h3>
            <p>Define your profile once. Pipelane scans 200M+ companies, web data, and hiring signals to surface accounts you should be talking to right now.</p>
            <div className="step-visual viz-scan">
              <div className="row">northwind.io · 180 ppl · series B</div>
              <div className="row">latticehealth.com · healthtech · 410</div>
              <div className="row">glacier.co · supply chain · 220</div>
              <div className="row">foundry.bank · fintech · 640</div>
              <div className="row">solace.energy · cleantech · 320</div>
            </div>
          </div>
          <div className="step">
            <span className="step-num mono">02 / SCORE</span>
            <h3>Predict buying intent before they reach out</h3>
            <p>Hiring posts, tech stack changes, funding events, web visits, leadership moves. We weigh 40+ signals and surface the accounts most likely to buy this quarter.</p>
            <div className="step-visual viz-radar">
              <div className="ring r3" />
              <div className="ring r2" />
              <div className="ring r1" />
              <div className="center" />
              <div className="blip b1" />
              <div className="blip b2" />
              <div className="blip b3" />
              <div className="blip b4" />
            </div>
          </div>
          <div className="step">
            <span className="step-num mono">03 / SEND</span>
            <h3>Sequence outreach and sync to your CRM</h3>
            <p>Personalized first lines, branching cadences, real reply detection. Closed-won data flows back into the model so the next batch is sharper than the last.</p>
            <div className="step-visual viz-flow">
              <div className="node active">
                <div className="ico">✉</div>
                <span>STEP 1</span>
              </div>
              <div className="arrow" />
              <div className="node">
                <div className="ico">↻</div>
                <span>FOLLOW</span>
              </div>
              <div className="arrow" />
              <div className="node">
                <div className="ico">⤴</div>
                <span>SYNC</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function LogoBar() {
  const logos = [
    { name: 'NORTHWIND', style: { fontFamily: 'Geist', letterSpacing: '0.02em' } },
    { name: 'lattice/', style: { fontWeight: 300, fontStyle: 'italic' } },
    { name: 'GLACIER', style: { fontFamily: 'JetBrains Mono', fontWeight: 500, letterSpacing: '0.1em', fontSize: 14 } },
    { name: 'foundry', style: { fontWeight: 700 } },
    { name: '◇ SOLACE', style: { letterSpacing: '0.08em', fontSize: 15 } },
    { name: 'Mercer&Co', style: { fontFamily: 'Georgia, serif', fontWeight: 400 } },
  ];
  return (
    <section className="container">
      <div className="logobar">
        <div className="logobar-label">Trusted by 1,200+ revenue teams</div>
        <div className="logos">
          {logos.map((l, i) => (
            <div key={i} style={l.style}>{l.name}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const tiers = [
    {
      tier: 'Starter',
      amt: '49',
      per: '/seat/mo',
      desc: 'For founders and solo SDRs starting outbound.',
      feats: ['500 qualified leads/mo', 'Intent scoring (basic)', 'Email + LinkedIn sequencing', 'Slack notifications', 'CRM sync (HubSpot)'],
      cta: 'Start free trial',
      btnClass: 'btn-ghost',
    },
    {
      tier: 'Growth',
      amt: '149',
      per: '/seat/mo',
      desc: 'For sales teams ready to compound pipeline.',
      feats: ['5,000 qualified leads/mo', 'Full intent scoring + 40 signals', 'Multi-channel sequences', 'Account mapping & playbooks', 'CRM sync (HS, Salesforce, Attio)', 'Dedicated success manager'],
      cta: 'Start free trial',
      btnClass: 'btn-accent',
      featured: true,
    },
    {
      tier: 'Scale',
      amt: 'Custom',
      per: '',
      desc: 'For lead-gen agencies and large RevOps teams.',
      feats: ['Unlimited qualified leads', 'Custom signal modeling', 'Multi-workspace + SSO', 'API + webhooks', 'White-glove onboarding', 'Volume pricing'],
      cta: 'Talk to sales',
      btnClass: 'btn-ghost',
    },
  ];
  return (
    <section className="section-pad" id="pricing">
      <div className="container">
        <div className="reveal">
          <span className="eyebrow"><span className="dot" /> Pricing</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'end', marginTop: 20 }} className="reveal reveal-d1">
          <h2 className="h-section">Pay for outcomes — qualified leads, not raw lists.</h2>
          <p className="lede">Every plan includes intent scoring, account mapping, sequencing, and CRM sync. Pick the volume that matches your pipeline.</p>
        </div>
        <div className="pricing-grid">
          {tiers.map((t, i) => (
            <div key={t.tier} className={`price-card reveal reveal-d${i + 1} ${t.featured ? 'featured' : ''}`}>
              {t.featured && <span className="featured-badge">MOST POPULAR</span>}
              <div className="tier mono">{t.tier}</div>
              <div className="price-amount">
                <span className="amt">{t.amt === 'Custom' ? 'Custom' : `$${t.amt}`}</span>
                <span className="per mono">{t.per}</span>
              </div>
              <p className="mute" style={{ fontSize: 14, color: t.featured ? 'var(--mute-2)' : 'var(--mute)' }}>{t.desc}</p>
              <ul className="price-feats">
                {t.feats.map(f => (
                  <li key={f}>
                    <span className="check">
                      <svg width="9" height="9" viewBox="0 0 9 9" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        <path d="M1.5 4.5 L3.5 6.5 L7.5 2" />
                      </svg>
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <button className={`btn ${t.btnClass} btn-tier`}>
                {t.cta}
                <span className="arrow">→</span>
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'How is Pipelane different from Apollo, ZoomInfo, or Clay?',
      a: 'Most data tools find names and emails. Pipelane finds intent — the moments when an account is actively likely to buy. We pair contact data with 40+ buying signals (hiring, funding, tech changes, web visits) so you spend your time on accounts that are warm, not cold.' },
    { q: 'Where do the intent signals come from?',
      a: 'A blend of public web data, job boards, technographic crawls, news + funding feeds, and your own first-party signals (web visits, form fills, CRM activity) once connected. We do not use private LinkedIn scraping.' },
    { q: 'How long does setup take?',
      a: 'Most teams are running their first sequence within a day. Connect your CRM, define your ICP, pick a sequence template — and Pipelane backfills your qualified pipeline overnight.' },
    { q: 'Which CRMs do you sync with?',
      a: 'Native two-way sync with HubSpot, Salesforce, and Attio. Webhook + REST API for everything else. Closed-won data flows back into the scoring model so it gets smarter as you sell.' },
    { q: 'Can I bring my own list of target accounts?',
      a: 'Yes. Upload a CSV, paste domains, or sync a saved view from your CRM. Pipelane will enrich, score, and watch them for new buying signals.' },
    { q: 'Is there a free trial?',
      a: '14 days, all features unlocked, no credit card. You\'ll see qualified leads in your dashboard within an hour.' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section-pad-sm" id="faq">
      <div className="container">
        <div className="reveal">
          <span className="eyebrow"><span className="dot" /> Questions</span>
        </div>
        <h2 className="h-section reveal reveal-d1" style={{ marginTop: 20, maxWidth: '20ch' }}>Things sales leaders ask before signing.</h2>
        <div className="faq-list reveal reveal-d2">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="plus">+</span>
              </button>
              <div className="faq-a"><p style={{ paddingTop: 4 }}>{it.a}</p></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTAFooter() {
  return (
    <section className="cta">
      <div className="cta-grid-bg" />
      <div className="cta-bg" />
      <div className="container cta-inner">
        <span className="eyebrow" style={{ color: 'var(--accent)' }}>
          <span className="dot" /> Ready when you are
        </span>
        <h2>Stop researching. Start closing.</h2>
        <p>Spin up Pipelane in under 10 minutes. See qualified leads with real intent inside your CRM by tomorrow morning.</p>
        <div className="cta-buttons">
          <a className="btn btn-accent">
            Start free 14-day trial
            <span className="arrow">→</span>
          </a>
          <a className="btn btn-dark-ghost">Book a demo</a>
        </div>
        <div className="mono" style={{ fontSize: 12, color: 'var(--mute-2)', marginTop: 8 }}>
          No credit card · Setup in &lt; 1 day · Cancel anytime
        </div>
      </div>
      <div className="container">
        <div className="footer">
          <Logo />
          <div className="footer-links">
            <a>Product</a>
            <a>Pricing</a>
            <a>Customers</a>
            <a>Security</a>
            <a>Careers</a>
            <a>© 2026 Pipelane Inc.</a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.HowItWorks = HowItWorks;
window.LogoBar = LogoBar;
window.Pricing = Pricing;
window.FAQ = FAQ;
window.CTAFooter = CTAFooter;
window.PipelaneLogo = Logo;