// Hero — full-bleed dark background, team-photo placeholder on top,
// hero headline + italic sub + founder attribution.
function Hero({ onScheduleClick }) {
  return (
    <section className="td-hero">
      <div className="td-hero__photo" role="img" aria-label="Trillion Digital team">
        <img src="./assets/trillion_team.webp" alt="Trillion Digital team"
             style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}} />
      </div>

      <div className="td-hero__quote td-callout td-callout--quote">
        <div className="td-callout__head">❝ Quote</div>
        <h1 className="td-hero__h">
          Full-Funnel Digital Marketing for Businesses That Are
          <span style={{color:'var(--trillion-gold)'}}> Serious About Growth.</span>
        </h1>
        <p className="td-hero__sub">
          <em>"Paid search, social, display, video, CTV, SEO, production, and
          AI-powered automation across <strong>ALL</strong> sectors,
          <strong> ALL</strong> under one roof, with one team that knows more
          about your customers than you do."</em>
        </p>
        <div className="td-hero__byline">
          <img className="td-hero__avatar" src="./assets/team_travis.jpeg"
               alt="Travis Paul Talamo II"
               style={{objectFit:'cover'}} />
          <div>
            <div className="td-hero__name">Travis Paul Talamo II</div>
            <div className="td-hero__role">Founder | CEO</div>
          </div>
          <button className="td-btn td-btn--primary" onClick={onScheduleClick} style={{marginLeft:'auto'}}>
            Schedule a Discovery Call →
          </button>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;