// Hero, education consulting with Forbes 30u30 credibility chip
function HeroSection({ headline, lede }) {
  return (
    <section className="hero" id="top">
      <div className="hero__bg">
        <div className="orb orb-pink" />
        <div className="orb orb-blue" />
        <div className="orb orb-teal" />
        <div className="orb orb-orange" />
      </div>
      <div className="hero__inner">
        <div className="hero__credits fade-up in">
          <span className="credit-chip credit-chip--forbes">
            <span className="forbes-mark">Forbes</span>
            <span className="forbes-divider" />
            <span className="forbes-3030">
              <span className="forbes-3030__num">30</span>
              <span className="forbes-3030__under">UNDER</span>
              <span className="forbes-3030__num">30</span>
            </span>
            <span className="credit-chip__year">Education</span>
          </span>
          <span className="credit-chip">
            <span className="credit-chip__dot" />
            Trusted by 500K+ learners across our platforms
          </span>
        </div>
        <h1 className="hero__title fade-up in">
          Better student outcomes,{" "}
          <span className="gradient-text">built on evidence.</span>
        </h1>
        <p className="hero__lede fade-up in">
          {lede || "LearnLytx is a boutique education consultancy. We work with district leaders, school heads, higher-ed administrators, ed-tech founders, and foundations to design programs, measure what's working, and improve learning."}
        </p>
        <div className="hero__ctas fade-up in">
          <a href="https://jira-b2c0c.web.app/book/1-1-6c9edd37" target="_blank" rel="noopener noreferrer" className="ll-btn ll-btn--hero ll-btn--xl">
            Book a Call <span className="arr">→</span>
          </a>
          <a href="#work" className="ll-btn ll-btn--outline ll-btn--xl">
            See Our Work
          </a>
        </div>
      </div>
      <div className="hero__fade" />
    </section>
  );
}
window.HeroSection = HeroSection;