// Hero section: nav, headline, 3D card (mounted by components/hero-card.js), trust strip.

const Nav = () =>
<nav className="nav">
    <div className="container nav-inner">
      <a href="#" className="brand">
        <img src="favicon.svg" className="brand-mark" alt="Vested Equity" />
        <span>Vested Equity</span>
      </a>
      <div className="nav-links">
        <a href="#how">How it works</a>
        <a href="#uses">What it&rsquo;s for</a>
        <a href="#faq">FAQ</a>
      </div>
      <div className="nav-cta">
        <a href="#elig" className="btn btn-link btn-sm">Sign in</a>
        <a href="#elig" className="btn btn-primary btn-sm">
          Check eligibility
          <Icon.Arrow />
        </a>
      </div>
    </div>
  </nav>;


const TrustStrip = () => {
  const marks = [
    { name: 'SpaceX',     file: 'spacex.svg' },
    { name: 'Anduril',    file: 'anduril.svg' },
    { name: 'Ramp',       file: 'ramp.svg' },
    { name: 'OpenAI',     file: 'openai.svg' },
    { name: 'Anthropic',  file: 'anthropic.svg' },
    { name: 'Cognition',  file: 'cognition.svg' },
    { name: 'Databricks', file: 'databricks.svg' },
    { name: 'Stripe',     file: 'stripe.svg' },
    { name: 'Scale',      file: 'scale.svg' },
    { name: 'Rippling',   file: 'rippling.svg' },
  ];

  const loop = [...marks, ...marks];
  return (
    <div className="trust">
      <div className="container">
        <div className="trust-label">Offered to employees at companies like</div>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {loop.map((m, i) =>
            <img
              key={i}
              className="trust-logo"
              src={`logos/${m.file}`}
              alt={m.name}
              loading="lazy"
            />
          )}
        </div>
      </div>
    </div>);

};

const Hero = () =>
<section className="hero">
    <div className="hero-glow" />
    <div className="hero-grid" />
    <div className="container hero-inner">
      <div className="hero-copy">
        <div className="eyebrow">Liquidity for high-conviction employees</div>
        <h1 className="display">Get <span className="accent-word">cash</span>.<br />Stay long.<br />No taxes.</h1>
        <p className="lede">
          Vested Equity is a line of credit backed by your vested shares. Cover
          a tax bill, exercise your options, diversify, or anything else,
          without selling a single share.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
          <a href="#elig" className="btn btn-primary btn-lg">
            See your line in 90 seconds
            <Icon.Arrow size={16} />
          </a>
          <a href="#how" className="btn btn-ghost btn-lg">How it works</a>
        </div>
        <p className="cta-assurance">
          No credit pull, no documents, no obligation.
        </p>
      </div>
      <div className="hero-stage" id="hero-card-3d" aria-hidden="true" />
    </div>
  </section>;


window.Hero = Hero;