window.Landing = function Landing({ navigate, density }) {
  // Live stats from central; copy + structure from env.js so the user can
  // edit headlines, features, and how-it-works in one place without touching
  // React.
  const health = window.api.useHealth();
  const L = (window.__ENV && window.__ENV.LANDING) || {};
  const features = L.features || [];
  const steps = L.how_steps || [];

  return (
    <div className="page">
      <section className="hero">
        <div className="hero-3d">
          <HeroScene density={density} />
        </div>
        <div className="hero-content">
          {L.eyebrow && (
            <div className="eyebrow"><span className="dot" />{L.eyebrow}</div>
          )}
          <h1 style={{marginTop:24}}>
            <span className="grad">{L.headline_top}</span><br/>
            <span className="grad">{L.headline_bottom}</span>
          </h1>
          <p className="hero-sub">{L.sub}</p>
          <div className="hero-cta">
            <a className="btn btn-accent btn-lg" href="#/pricing" onClick={(e)=>{e.preventDefault();navigate('/pricing');}}>Get access <Icon name="arrow" /></a>
            <a className="btn btn-ghost btn-lg" href="#/graphs" onClick={(e)=>{e.preventDefault();navigate('/graphs');}}>Explore the graphs</a>
          </div>
        </div>
        <div className="hero-stats">
          <div className="hero-stat">
            <div className="hero-stat-v mono">{window.api.fmtNumber(health.entities)}</div>
            <div className="hero-stat-l">Entities · financial</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-v mono">{window.api.fmtNumber(health.relationships)}</div>
            <div className="hero-stat-l">Relationships</div>
          </div>
          <div className="hero-stat">
            <div className="hero-stat-v mono">{window.api.fmtNumber(health.facts)}</div>
            <div className="hero-stat-l">Facts indexed</div>
          </div>
        </div>
      </section>

      {features.length > 0 && (
        <section className="section">
          <div className="container">
            <div className="section-head">
              {L.features_eyebrow && <div className="eyebrow">{L.features_eyebrow}</div>}
              <h2>{L.features_h}</h2>
              {L.features_lede && <p className="lede">{L.features_lede}</p>}
            </div>
            <div className="feature-grid">
              {features.map((f, i) => (
                <div className="feature" key={i}>
                  <Icon name={f.ico} size={24} className="ico" />
                  <h3>{f.h}</h3>
                  <p>{f.p}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {steps.length > 0 && (
        <section className="section">
          <div className="container">
            <div className="section-head">
              {L.how_eyebrow && <div className="eyebrow">{L.how_eyebrow}</div>}
              <h2>{L.how_h}</h2>
            </div>
            <div className="steps">
              {steps.map((s, i) => (
                <div className="step" key={i}>
                  <div className="step-n">{s.n}</div>
                  <h3>{s.h}</h3>
                  <p>{s.p}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      <section className="section">
        <div className="container" style={{textAlign:'center'}}>
          <div style={{display:'inline-flex',flexDirection:'column',alignItems:'center',gap:24,maxWidth:680,margin:'0 auto'}}>
            {L.cta_eyebrow && <div className="eyebrow">{L.cta_eyebrow}</div>}
            <h2 style={{textAlign:'center'}}>{L.cta_h}</h2>
            {L.cta_lede && <p className="lede" style={{textAlign:'center'}}>{L.cta_lede}</p>}
            <div style={{display:'flex',gap:12,marginTop:8,flexWrap:'wrap',justifyContent:'center'}}>
              <a className="btn btn-accent btn-lg" href="#/pricing" onClick={(e)=>{e.preventDefault();navigate('/pricing');}}>See pricing <Icon name="arrow" /></a>
              <a className="btn btn-ghost btn-lg" href="#/graphs" onClick={(e)=>{e.preventDefault();navigate('/graphs');}}>Browse the graphs</a>
            </div>
          </div>
        </div>
      </section>

      <Footer navigate={navigate} />
    </div>
  );
};