// Director.jsx — "The Visionary Director" section.
// Layered figure (vignetted base photo + warm lamp spill + sharp cutout)
// on the left, copy + CTA on the right.
function Director({ onReadMore }) {
  return (
    <div className="tk-director">
      <div className="tk-figure" aria-hidden="true">
        <img src={(window.__resources && window.__resources.directorImg) || "../../assets/director-composite.png"} alt="" />
      </div>

      <div className="copy">
        <div className="eyebrow">The Visionary Director</div>
        <h2>The Boy Who Brought The Worlds He Imagined To Life</h2>
        <p>
          Ted was six when he asked an innocent question that would unknowingly
          shape his entire life and career: &ldquo;What does that button do, Daddy?&rdquo;
          His father handed him the camera and he hasn&rsquo;t stopped using it since.
        </p>
        <p>
          Forty years later, Ted Saunders has directed everything from viral
          Burning Man narrative films to high-converting global Salesforce
          campaigns. He has gone from building studios, to losing everything,
          and much like his photography, had to develop in that darkness —
          reemerging with a strength, stamina and skill forged in the fires of
          transformation. Ted&rsquo;s philosophy, to show the beauty of humanity
          captured through our imperfection, is exposed through every frame he
          shoots.
        </p>
        <div className="cta-wrap">
          <Button variant="gold-outline" onClick={onReadMore}>READ THE FULL STORY</Button>
        </div>
      </div>
    </div>
  );
}

window.Director = Director;